이벤트 위임을 알아보기 전에 이벤트가 전파되는 과정을 알아야 합니다.
만약 이벤트를 발생시키면 이벤트 객체가 만들어 집니다. 만들어진 이벤트 객체는 이벤트를 발생시킨 DOM 요소인 이벤트 타깃을 중심으로 DOM 트리를 통해 전파됩니다.
<ul id="fruits">
<li id="apple">Apple</li>
<li id="banana">Banana</li>
<li id="orange">Orange</li>
</ul>
li
요소를 클릭하면 클릭 이벤트 객체가 생성되며, window
에서 시작해 이벤트 타겟 방향으로 전파됩니다.window
방향으로 전파됩니다.<html>
<body>
<ul id="fruits">
<li id="apple">Apple</li>
<li id="banana">Banana</li>
<li id="orange">Orange</li>
</ul>
</body>
<script>
const $fruits = document.querySelector('#fruits');
const $banana = document.querySelector('#banana');
// li 요소를 클릭할 경우 캡처링 단계에서 이벤트를 캐치합니다..
$fruits.addEventListener('click', e => {
console.log(`이벤트 단계: ${e.eventPhase}`); // 1. 캡처링 단계
console.log(`이벤트 타깃: ${e.target}`); // li element
console.log(`커런트 타깃: ${e.currentTarget}`); // ul element
}, true);
// 타깃 단계에서 이벤트를 캐치합니다.
$banana.addEventListener('click', e => {
console.log(`이벤트 단계: ${e.eventPhase}`); // 2. 타깃 단계
console.log(`이벤트 타깃: ${e.target}`); // li element
console.log(`커런트 타깃: ${e.currentTarget}`); // li element
});
// 버블링 단계에서 이벤트를 캐치합니다.
$fruits.addEventListener('click', e => {
console.log(`이벤트 단계: ${e.eventPhase}`); // 3. 버블링 단계
console.log(`이벤트 타깃: ${e.target}`); // li element
console.log(`커런트 타깃: ${e.currentTarget}`); // ul element
});
</script>
</html>
이벤트 위임은 이벤트 버블링을 이용한 방법입니다.
여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트를 한번만 등록하면 됩니다. 이때 하위 DOM 요소에 이벤트를 발생시키면 이벤트는 위로 전파되어 버블링 단계에서 상위 DOM 요소가 이벤트를 캐치하게 됩니다.
이벤트 위임을 통해 하위 DOM 요소에서 발생한 이벤트를 처리할 때 주의할 점은 상위 요소에 이벤트 핸들러를 등록하기 때문에 이벤트를 실제로 발생시킨 DOM 요소가 원하는 요소가 아닐 수 있습니다.
이경우 아래와 같이 이벤트 타깃을 검사해주어야 합니다.
function activate({target}) {
if (!target.matches('#fruits > li') {
return;
}
....
}