이벤트 버블링(Event Bubbling), 캡처링(Event Capturing)

1.이벤트 버블링(Event Bubbling)

이벤트 버블링이란 한 요소에 이벤트가 발생하면 이 요소에 할당된 핸들러가 동작하고, 

이어서 부모 요소의 핸들러가 동작하고 최상단의 부모 요소를 만날때 까지 반복하면서 핸들러가 동작하는 현상이다.

<div class="div1">div1
	<div class="div2">div2
    	<div class="div3">div3</div>
	</div>
</div>


<script>
const divs = document.querySelectorAll("div");

const clickEvent = (e) => {
  console.log(e.currentTarget.className);
};

divs.forEach((div) => {
  div.addEventListener("click", clickEvent);
});
</script>

///여기서 div3을 클릭하면 div3 div2 div1 순서대로 출력이 된다. 
///document 객체를 만날 때 까지 이벤트가 실행된다.

 

2.이벤트 캡쳐링(Event Capturing)

캡쳐링은 버블링과는 반대 개념이다. 최상위 태그 부터 자식 요소를 찾아간다.

<div class="div1">div1
	<div class="div2">div2
    	<div class="div3">div3</div>
	</div>
</div>



<script>
const divs = document.querySelectorAll("div");

const clickEvent = (e) => {
  console.log(e.currentTarget.className);
};

divs.forEach((div) => {
  div.addEventListener("click", clickEvent, { capture: true });
});
</script>

///addEventListener 의 옵션 객체에 { capture: true } 
///또는 true 를 설정해주면 캡처링을 구현할 수 있다.
///위에서 부터 찾아내려가기 때문에 div1, div2, div3부터 출력된다.
/// 잘 사용하진 않는다.

 

3. 원하는 타깃에서만 이벤트를 발생코자 할 때

event.stopPropagation()

상위 요소로 이벤트가 전파되는 것을 막을 수 있다.

const clickEvent = (e) => {
  e.stopPropagation();
  console.log(e.currentTarget.className);
};