Event Delegation

Event Delegation: 이벤트 위임

Event Delegation 종류:    Bubbling, Capturing

이벤트 위임이 필요한 이유:

예를들어 뉴스의 종류를 보여주는 레이아웃이 있고

각 뉴스들을 클릭했을 때마다 동작하도록 이벤트를 등록하고자 한다면?

1. li태그 참조

2. 몇개가 될지도 모르는 li태그들을 반복문돌면서 click 이벤트 등록함

li개수가 많아지면 매우 비효율적

-------------------------------------------------------------------------------

그렇다면 이벤트 위임은 어떻게 동작하는가?

(Bubbling 기법)

1. 이벤트를 등록하고자 하는 많은 요소들의 부모 요소를 찾음

2. 부모요소에 이벤트를 등록함

3. 그럼 자식요소들은 이벤트 발생시 부모가 이미 이벤트 등록했기에 그걸로 이벤트 실행함

(반복문으로 미리 등록해주고 하는 것이 아님)

(이벤트 발생즉시 안쪽에서 부모로 올라가며 이벤트를 찾는 것임)

이런식으로 코드는 구성된다

ul태그안에 li태그가 많이 있고. 각자 반복문 돌면서 이벤트를 등록하지 않고

Bubbling기법으로 구현하였다.

구현의 핵심은 evt매개변수의 target 이다

evt.target = 이벤트가 실제로 발생한 요소

evt.currentTarget = 이벤트를 실제로 등록한 요소