지난번에 알아본 이벤트 버블링과 캡처링은 이벤트 위임을 이해하기 위한 기본 바탕이라고 할 수 있다.
이벤트 버블링, 캡처링
버블링 : 특정 요소에서 발생한 이벤트가 상위 요소로 전달되는 방식
캡처링 : 특정 이벤트가 발생했을 때 최상위 요소인 body 태그에서 해당 태그로 전달되는 방식
이벤트 위임
상위 요소에서 하위 요소의 이벤트들을 제어하는 방식
쉽게 얘기하면 하위 요소 여러개가 있을 때 각각에 이벤트를 설정하지 않고 상위 요소에서 해당 요소의 하위에 있는 요소들의 이벤트를 제어하는 방식이다.
<body>
<div>
<ul class="ul-tag">
<li class="one">One</li>
<li class="two">Two</li>
<li class="three">Three</li>
</ul>
</div>
<script>
document.querySelector('.ul-tag').addEventListener('click', event => {
alert('click class' + event.target.classList )
});
</script>
</body>이렇게 하면 이벤트리스너를 ul-tag 클래스에만 등록했는데 하위의 li요소를 클릭할 때 이벤트가 발생하는 것을 볼 수 있다.
One 클릭 시
Two 클릭 시
Three 클릭 시
또 다른 li 태그가 생성되더라도 이벤트를 등록하지 않아도 클릭 이벤트를 받을 수 있어서 좋지만 불필요한 이벤트가 발생하는 경우도 생길 수 있기 때문에 잘 선택해서 사용해야 할 것 같다.
