JS) Event Listener, Event Handler, Event Bubbling

이벤트 리스너 & 이벤트 핸들러 

이벤트 리스너와 이벤트 핸들러를 합쳐 이벤트 리스너 혹은 이벤트 핸들러라고 한다.
하지만, 이를 정확하게 말하자면 이벤트 리스너에 등록된 콜백함수가 이벤트 핸들러이다.

div.onClick(() => {});
div.addEventListener('click', () => {});

 

이벤트	이벤트 속성 (이벤트 리스너)	이벤트 핸들러
click	addEventListener(), onClick()	function(){}

 

 

이벤트 핸들러의 호출 과정

 

1. 하위 요소에 이벤트 저나 캡쳐링

2. 타깃요소에 이벤트 전달

3. 상위 요소로 다시 이벤트 전파 버블링

 

이벤트 버블링 (Event Bubbling)

- 특정 요소에서 이벤트가 발생됐을 때, 해당 이벤트가 상위 요소들로 전달되어 가는 특성을 말한다.

- 이벤트가 제일 깊은곳의 요소부터 시작해 부모요소를 거슬러 올라가며 이벤트가 발생하는 모양이 마치 물속 거품과 같아 bubbling 이라고 부른다.

event.target 과 event.currentTraget 의 차이점

타깃(target) 요소

- 이벤트가 발생한 가장 안쪽의 요소로, 내가 클릭한 바로 그 요소

- event.target을 통해 접근 가능하다.

- 버블링이 진행되어도 변하지 않는다.

event.currentTarget와 this

- event.currentTarget은 this와 같다.

- 왜냐? 메소드 내부의 this는 해당 메소드를 호출한 객체에 바인딩되기 때문이다.

- this, 즉 eventCurrentTarget은 현재 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조한다.

 

 

버블링 중단시키기

event.stopPropagation()

- 이벤트 버블링을 막아야하는 경우는 거의 없다.

- 위 메소드로 버블링을 막게되면, 페이지의 어느 부분을 클릭했는지에 대한 분석 시스템이 동작하지 못하게 된다.

 

 

 

이벤트 캡쳐 (Event Capture)

- 이벤트 버블링과 반대되는 방법

- 이벤트 핸들러 호출 과정의 캡처링 과정에서 이벤트를 잡아내는 방법

 

 

이벤트 위임 (Event Delegation)

- 이벤트 캡처링과 이벤트 버블링을 활용한 패턴

- 하위 요소마다 이벤트를 등록하지 않고도 하위 요소들의 공통된 부모 요소에 이벤트를 등록하여 하위 요소의 이벤트들을 관리하는 방식이다.

 

 

요약

1. 이벤트 버블링은 특정 요소에서 이벤트가 발생했을 때 해당 이벤트가 상위 요소들한테 차례로 전달되는 특성이다.
2. 하위요소 → 상위요소로 이벤트가 전파되는 것은 이벤트 버블링이며, 이와 반대로 상위요소 → 하위요소로 이벤트가 전파되는 것은 이벤트 캡처링이다.
3. 이러한 이벤트 버블링, 캡쳐링 특성을 이용하여 하위요소마다 이벤트를 등록하지 않아도 공통된 상위요소에 이벤트를 등록해 관리할 수 있는 패턴을 이벤트 위임이라고 한다