[JavaScript] Event Bubbling & Capturing

Event

mouse click  클릭할때

keyboard  키를 누를때

resizing window  화면사이즈 재조정할때

close window  화면을닫을때

page loading  페이지 로딩할때

form submission  양식을 제출할때

video is being played  영상이 재생될때

error  에러시

 

Bubbling 

한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작한다.

가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작한다.

이벤트 버블링

Capturing 

이벤트가 하위 요소로 전파되는 단계를 말함

 

event.target 과 this의 차이

• event.target은 실제 이벤트가 시작된 ‘타깃’ 요소 버블링이 진행되어도 변하지 않음
• this는 ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조 , (=event.currentTarget)

클릭한 요소의 부모요소에 할당된 이벤트 핸들러까지 동작하기때문에  this는 최상단의 부모요소를 가리킨다.

 

제어하기

되도록 버블링 막지않기 ! 추후에 시스템상 곤란해지는 경우가 생기기때문에 사용을 권장하지않음

 

event.stopImmediatePropagation()

위쪽으로 일어나는 버블링은 막아주지만, 다른 핸들러들이 동작하는 건 막지 못한다.

 

 event.stopImmediatePropagation() 

버블링도 막고, 다른 핸들러들이 동작하는것도 중지시킨다.

이 메서드를 사용하면 요소에 할당된 특정 이벤트를 처리하는 핸들러 모두가 동작하지 않는다.

조건문으로 제어하기

event.target 과 current.target이 다른점을 이용해서 버블링을 막을수있다.

div.addEventListener('click', event =>{
 if (event.target !== event.currentTarget){
 	return;
 } //target 과 this(event.currentTarget)이 같지 않으면 리턴하지않음
  function(); //전달할 함수적용
 )}

 

Ref.

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events

Introduction to events - Learn web development | MDN

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링