이벤트 위임
하위요소에서 발생한 이벤트를 상위요소에서 처리하도록 만든다.
=>자식 요소의 이벤트를 부모 요소에서 처리할 수 있도록 위임하는 것 (메모리 절약)
<ul id="card-list" onclick="handleClick(event)">
<li class="movie-card" id="movieId">
<img src="https://image.tmdb.org/t/p/w500${movie.poster_path}" alt="${movie.title}">
<h3 class="movie-title">제목</h3>
<p>내용</p>
<p>Rating: 평점</p>
</li>
</ul> 부모 요소인 ul 태그에 이벤트 핸들러가 등록되어 있으면 자식 요소인 li, img, h3, p 태그 중 어떤 것을 클릭해도 부모 요소의 이벤트 핸들러가 실행된다.
이벤트 위임을 잘 다루려면 event.target, event.currentTarget 의 차이를 알아야 한다.
(위의 코드 기준)
event.target -> 내가 클릭한 부분 (li, img, h3, 줄거리(p), 평점(p)) or ul태그
event.currentTarget -> 이벤트 핸들러가 등록되어 있는 요소 -> ul태그 (부모요소)
이벤트 위임이 가능한 이유
:이벤트 버블링이란 특징 때문이다.
이벤트 버블링이란? 하위 요소에서 발생한 이벤트가 상위 요소로 전파되는 현상.
이벤트 발생 시 이벤트 '전파'흐름
캡쳐링 단계 1, 타겟 단계 2, 버블링 단계 3
브라우저에서 li 태그를 클릭하게 되면 가장 상위 객체인 window부터 시작해서 아래로 내려오는 캡쳐링 단계를 거친다. 그리고 li태그에 이벤트(ex.onclick)가 할당되어 있다면 이벤트를 인지하고 활성화시킨다. 그리고 다시 window객체로 거슬러 올라간다. 이 단계를 버블링단계라고 한다. 만약 이 거슬러 올라가는 단계에서 ul태그와 body태그에도 이벤트가 할당되어 있다면, 순차적으로 이벤트가 활성화 된다.
li -> ul -> body
Element.addEventListner('click', function (event) {
console.log(event);
}, true)버블링 말고 캡처링 단계에서 우선적으로 이벤트를 활성화시키는 방법
:위 코드에 세 번째 인자에 true를 추가하면 된다. 이때 true는 불리언 타입으로 캡쳐링 단계에서 이벤트를 활성화시킬지에 말지에 대한 것이다.
이벤트 핸들러란?
이벤트가 발생했을 때 실행되는 함수
