이벤트 위임은 동적으로 생성되거나 삭제되는 DOM 요소들이 있을 때
각각 요소들마다 addEventListener()를 사용하여 이벤트 리스너를 등록하는 것이 아니라
요소들을 감싸고 있는 부모에만 이벤트 리스너를 등록하여 자식 노드들의 이벤트를 제어할 수 있는 방법이다.
이벤트 위임을 이해하기 위해 선수지식이 필요한데 바로 이벤트 버블링(Event Bubbling) 이다.
이벤트 버블링을 간단히 정의해 보면 다음과 같다.
<aside>
💡 어떠한 요소에 이벤트가 발생했을 때 이벤트가 최상위의 요소(document)를 만날 때까지 전달되는 특성이다.
</aside>
이렇게 글로만 봤을 때 아직 와닿지 않을 수도 있다. 바로 코드로 확인해보자
<html>
<body>
<main class="main">
Main 입니다.
</main>
<footer>
Footer 입니다.
</footer>
<script src="main.js"></script>
</body>
</html>
document.addEventListener('click', e => {
console.log('document 클릭!');
});
const $html = document.documentElement;
$html.addEventListener('click', e => {
console.log('html 클릭!');
});
const $body = document.body;
$body.addEventListener('click', e => {
console.log('body 클릭!');
});
const $main = document.querySelector('.main');
$main.addEventListener('click', e => {
console.log('main 클릭!');
});
const $footer = document.querySelector('footer');
$footer.addEventListener('click', e => {
console.log('footer 클릭!');
});