이벤트 버블링,캡처링에 대한정리(+feat JS) 이벤트가 여러개가 동시에 일어날때

1.이벤트 버블링

 

버블링: 특정 화면 요소에서 이벤트가 발생했을때 상위 요소로 전달되어 이벤트를 발생시키는것을 의미한다.

 

구조 예시

위그림의 구조이다. 모두 클릭이벤트가 있다고 가정해보자.

<div id="div1">
 <div id="div2">
  <p>예시<p>
 </div>
</div>

타겟:클릭한 이벤트 요소

 

P태그(타겟) 클릭시 이벤트가 발생하고 

그다음 #div2인 div에 이벤트가 발생하고

그다음 #div1인 div에 이벤트가 발생한다.

이를 버블링 이라고 한다.

 

이러한 버블링이 일어나는 이유는 브라우저가 이벤트를 감지하는 방식 때문이다.

 

2.이벤트 캡처링

 

 

타겟:클릭한 이벤트 요소

 

말그대로 반대로 진행되는 이벤트 전파방식이다.

#div1인 div태그(타겟) 클릭시

그다음 #div2인 div에 이벤트가 발생하고

그다음 p태그에 이벤트가 발생한다.

 

이를 캡처링 이라고 한다.

 

JS코드에선 캡처링을 TRUE,FALSE로 방지할수있다.

default는 false라서 true로 하지않는한 캡처링은 발생할것이다.

 

var divs = document.querySelectorAll('div');
divs.forEach(function(div) {
	div.addEventListener('click', logEvent, {
		capture: true // default 값은 false입니다.
	});
});

function logEvent(event) {
	console.log(event.currentTarget.className);
}

 

3.버블링,캡처링 방지

event.stopPropagation()

 

function logEvent(event) { event.stopPropagation(); }

위 API는 해당 이벤트가 전파되는 것을 막는다. 따라서, 이벤트 버블링의 경우에는 클릭한 요소의 이벤트(타겟) 만 발생시키고 상위 요소로 이벤트를 전달하는 것을 방해한다. 그리고 이벤트 캡쳐의 경우에는 클릭한 요소의 최상위 요소의 이벤트만 동작시키고 하위 요소들로 이벤트를 전달하지 않는다.

 

출처:

https://joshua1988.github.io/web-development/javascript/event-propagation-delegation/