이벤트 버블링, 이벤트 위임

버블링

하위의  이벤트가 상위로 전달되어 가는 것

부모/자식의 구조를 가지고 똑같은 이벤트를 가지고 있는 경우에만 발생하는 것.

 

 

 

div에 클릭 이벤트 리스너를 등록해 놓고,
button에도 클릭 이벤트 리스너를 등록해 놓으면,
button을 클릭하면 button에 등록된 클릭 이벤트 콜백함수가 실행되어지고,
div에도 등록된 클릭 이벤트 콜백 함수가 실행되어져요.

div에 클릭이 일어 난게 아닌데도 div에 등록된 콜백함수가 실행되는 것은
자식 요소에 이벤트가 발생하면 부모  콜백함수도 실행되어진다.

이것이 버블링 입니다.
이벤트가 위쪽 (부모쪽)으로 올라가죠.

(부모 컨텐츠는 모든 자식들에서 event가 발생하는 것을 들을 수 있다)

 

이벤트 위임

이제, 이 버블링을 이용해서 이벤트 위임을 구형할 수 있어요. 

button 5개 모두에게 클릭 이벤트 리스너를 등록하지 않아도,
부모 요소 div에만 클릭 이벤트 리스너를 등록 해놓으면
그 안의 버튼들이 클릭이 되어지면(클릭 이벤트 발생!) 부모요소에 등록된 클릭 이벤트가 발생한다.

여기서 문제는,
버튼을 클릭해도, 또는 div안의 여백의 공간을 클릭해도 등록된 클릭 이벤트 콜백 함수가 계속 실행되어지겠죠? 버튼이 클릭되어지면 자식 요소가  클릭이 되었으니 버블링을 통해 div에 등록된 콜백 함수가 실행되고 div안의 여백이 클릭되면 div 자체가 클릭이 되었으니 콜백 함수가 실행되어지고.

여기서 버튼이 클릭 되었을때만 이벤트를 처리 하고 싶다면?
event.target.tagName


이 둘에는 차이가 있는데 event.currentTarget은 이벤트가 걸려있는 위치를 반환

 

event.target은 실제 이벤트가 발생하는 위치, 내가 클릭한 요소를 반환한다.

두 객체가 같을 수도 있지만 이벤트 위임을 통해 이벤트를 주었다면 두 개는 다른 값을 가질 것이다.