Event delegration

Event delegration

 

예제

li 각각에 addEventListener를 통해 이벤트를 등록한다.

브라우저는 4개의 이벤트 리스너를 기억하고 있다. list가 훨씬 더 많아진다면 브라우저는 기억해야 할 이벤트 리스너도 그만큼 많아져서 비효율적이다. 또한, list가 동적으로 추가된다면 추가된 엘리먼트에 역시 addEventListener를 해줘야 한다. 

 

target정보가 그때 돕는다.

예를들어 UL태그에만 이벤트를 새롭게 등록한다.

li나 img태그는 UL태그에 속하기도 한다. 따라서 UL에 등록한 이벤트 리스너도 실행이 된다. 이것 이벤트 버블링이라고 한다. 클릭한 지점이 하위엘리먼트라고 하여도, 그것을 감싸고 있는 상위 엘리먼트까지 올라가면서 이벤트 리스너가 있는지 찾는 과정이다. 만약, img, li, ul에 각각 이벤트를 등록했었다면 3개의 이벤트 리스너가 실행했을 것이다. 

 

하위 엘리먼트는 3번부터 이벤트가 발생하고 2, 1 순으로 이벤트가 발생한다. 

Capturing이라는 것도 있다. 반대로 이벤트가 발생하는 것이다. 기본적으로 Bubbling 순서로 이벤트가 발생한다. Capturing 단계에서 이벤트 발생을 시키고 싶다면 addEventListener 메서드의 3번째 인자에 값을 true로 주면 된다.

 

Event Bubbling출처 https://www.grapecity.com/en/blogs/html-and-wijmo-events/

HTML and Wijmo Events: Capturing, Bubbling, and Listeners

 

 

 

Event bubbling

 

중첩된 노드에서 아래 것을 클릭했을때 상위 엘리먼트에도 등록된 이벤트 리스너가 있다면 실행을 시켜주는 과정이다.

 

 

 

 

 

 

참고 : boostcourse  https://www.boostcourse.org/web316/lecture/254331?isDesc=false

웹 프로그래밍(풀스택)