이벤트 위임

이벤트 버블링과 캡처링

이벤트 위임에 대해 알려면 이벤트 버블링과 이벤트 캡처링의 동작 방식을 선수지식으로 알고있어야 한다.

 

이벤트 버블링 이란?

• 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 상위요소 까지 이벤트가 전달되는 방식이다.

 

이벤트 캡처링 이란?

• 하위 엘리먼트에 이벤트 핸들러가 있을 때 상위 엘리먼트부터 이벤트가 발생하기 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식이다.

 

예시를 보자

<div>
  <ul>
    <li>예시</li>
  </ul>
</div>

document.querySelector('li').addEventListener('click', () => console.log('li 클릭'));
document.querySelector('ul').addEventListener('click', () => console.log('ul 클릭'));
document.querySelector('div').addEventListener('click', () => console.log('div 클릭'));

각 엘리먼트에 이벤트 핸들러를 달아주고 li 태그를 클리해주면 아래와 같은 결과를 보여준다.

li 클릭
ul 클릭
div 클릭

이것이 기본적인 이벤트 버블링의 동작 방식이다.

이 방식을 이벤트 캡처링으로 바꿔주려면 addEventListener()의 마지막 인자로 {capture: true}를 전달하면 된다.

이러면 클릭한 엘리먼트의 상위 요소 중 이벤트 캡처링이 적용된 엘리먼트부터 이벤트가 발생하고, 그 다음부터 다시 이벤트 버블링 방식으로 동작한다.

이제 ul 의 이벤트 핸들러에 캠쳐링을 적용하고, li 태그를 다시 클릭해 보면 아래와 같은 결과를 보여준다.

document.querySelector('ul').addEventListener('click', () => console.log('ul 클릭'), { capture: true });

ul 클릭
li 클릭
div 클릭

ul의 이벤트 헨들러가 먼저 동작하고 li부터는 다시 이벤트 버블링 방식으로 동작하게되어 div 헨들러가 동작한다.

 

 

이벤트 위임

이벤트 위임 이란?

하위 엘리먼트들이 여러개 있을 때, 하위 엘리먼트들에 각각 이벤트 핸들러를 달지 않고 상위 엘리먼트에 이벤트 핸들러를 달아 하위 엘리먼트들을 제어하는 방식

 

이벤트 위임으로 얻는 이점은 아래와 같다.

1. 동적으로 엘리먼트를 추가할 때마다 핸들러를 고려할 필요가 없다.
2. 상위 엘리먼트에 하나의 이벤트 핸들러만 추가하면 되기에 코드가 간결해진다.
3. 메모리에 있게되는 이벤트 핸들러가 적어지기 때문에 퍼포먼스 측면에서 이점이 있다.

 

예시를 보도록 하자

<ul onclick="alert(event.type + '!')">
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>
</ul>

각가의 li 태그에 이벤트 핸들러를 추가하지 않고 상위 엘리먼트인 ul에만 단것을 확인할 수 있다.

 

 

무조건 적으로 이벤트 위임이 좋다고는 할 수 없기에 상황에 맞게 사용하는 것이 중요하다.