공부 및 일상기록

[Javascript] 이벤트 버블링과 캡쳐링, 이벤트 위임 본문

개발/Javascript

[Javascript] 이벤트 버블링과 캡쳐링, 이벤트 위임

낚시하고싶어요 2023. 1. 6. 00:01

이벤트 버블링이란?

이벤트 버블링은 특정 화면 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위의 부모 요소들로 전달되어 가는 특성을 의미한다.

<body>
	<div class="one">
		<div class="two">
			<div class="three">
			</div>
		</div>
	</div>
</body>
<script>
var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent);
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}
</script>

위처럼 div안에 div안에 div를 만들고 세개의 태그에 모두 클릭 이벤트를 만들었을때 타겟의 클래스명을 콘솔에 찍히도록 설정한 뒤, 클래스 three인 div를 클릭하면 three, two, one 순서로 console이 찍히게 된다.

 

이는 브라우저가 특정 요소에서 이벤트가 발생했을 때, 이벤트를 최상위에 있는 요소까지 이벤트를 전파시켜서 읽는 특징때문에 생기는 현상이다.

 

반대로 이벤트리스너 함수의 세번째 파라미터에 true값을 주게 되면 버블링의 반대방향인 캡쳐링이 발생한다.

 

이벤트 위임이란 무엇인가?

말 그대로 자신에게 발생한 이벤트를 다른 요소에서 처리하는 것이다. 버블링을 이용하여 간단히 진행 할 수 있다.

이벤트 위임은 여러개 요소의 같은 이벤트를 다룰 때, 각각의 클래스에 모두 이벤트핸들러를 추가해주는 것이 아니라 부모요소에 한번만 추가하여 사용 가능하게 하는 것이다.

이 경우 코드도 간단해지고 수정도 편리해진다.

이것이 가능한 이유는 어차피 자식 요소에서 이벤트가 발생하면 버블링 때문에 부모 요소들도 모두 동일 이벤트가 발생하게 되는데, 이때 부모요소에 이벤트 핸들러를 실행시키면서 가능하게 되는 것이다. 

 

 

같이보면 좋은 유튜브

https://www.youtube.com/watch?v=beLituqpwl8 

 

저작자표시

'개발 > Javascript' 카테고리의 다른 글

[Javascript] 실행컨텍스트 (execution context)  (0) 2023.01.06
[Javascript] 스코프란? 스코프 체인이란?  (0) 2023.01.06
[Javascript] 호이스팅이란?  (0) 2023.01.05
[Javascript] var, let, const에 대해 설명  (0) 2023.01.05
[Javascript] 동기와 비동기란 무엇인가?  (0) 2023.01.05
'개발/Javascript' Related Articles more