이벤트 위임을 설명하기 전에 이벤트 버블링과 캡처링에 대해 간단히 설명하겠다.
이벤트 버블링 & 캡처링
버블링
이벤트가 상위 요소로 전파되는 단계를 의미한다.
<form onclick="alert('form')">FORM
<div onclick="alert('div')">DIV
<p onclick="alert('p')">P</p>
</div>
</form>여기서 p태그 부분을 클릭하게 된다면 p → div → form 순서로 핸들러가 실행이 된다.
이것을 이벤트 버블링이라고 한다.
버블링 중단
버블링을 중단하고 싶을땐 핸들러 함수 내부에 event.stopPropagation()을 사용한다. 이는 이벤트를 완전히 처리하고 버블링을 중단한다.
캡처링
버블링과 반대되는 개념이다. 이벤트가 하위 요소로 전파되는 단계를 의미한다.
캡처링을 사용하려면 addEventListener(..., {capture: true}) or addEventListener(..., true)를 작성하면 된다.
하지만 캡처링은 거의 쓰이지 않는다.
이벤트 위임
위에서 설명한 이벤트 버블링을 이용하여 상위 요소에 핸들러를 등록해서 여러 하위 요소에 이벤트가 실행이 되도록 할 수 있다.
최상위 요소에 핸들링을 할당하고 event.target을 사용해 어디서 이벤트가 발생했는지 알아낸다. 원하는 요소에서 이벤트가 발생했다고 하면 이벤트를 핸들링하면 된다.
장점은 핸들러를 각 하위요소에 할당하지 않아도 돼서 메모리 절약이 가능합니다. 또한 DOM 수정이 쉽고 메모리 누수가 줄어든다.
