이벤트 위임

이벤트 전파DOM 트리 상에 존재하는 DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파된다. 이를 이벤트 전파라 한다. Apple Banana Orange  ul 요소의 자식 요소인 li 요소를 클릭하면 클릭이벤트가 발생하며 생성되는 이벤트 객체는 이벤트를 발생시킨 이벤트 타깃을 중심으로 DOM 트리를 통해 전파된다.캡처링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파타깃 단계 : 이벤트가 이벤트 타깃에 도달버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파ul 요소에 이벤트 핸들러를 바인딩한 예제를 보며 알아보자. Apple Banana Orange  이벤트 핸들러 어트리뷰트/프로퍼티 방식으로 등록한 이벤트 핸들러는 타깃..

이벤트 버블링과 캡처링 이벤트 위임에 대해 알려면 이벤트 버블링과 이벤트 캡처링의 동작 방식을 선수지식으로 알고있어야 한다. 이벤트 버블링 이란? 하위 엘리먼트에 이벤트가 발생할 때 그 엘리먼트부터 상위요소 까지 이벤트가 전달되는 방식이다. 이벤트 캡처링 이란? 하위 엘리먼트에 이벤트 핸들러가 있을 때 상위 엘리먼트부터 이벤트가 발생하기 시작해서 하위 엘리먼트까지 이벤트가 전달되는 방식이다. 예시를 보자 예시 document.querySelector('li').addEventListener('click', () => console.log('li 클릭')); document.querySelector('ul').addEventListener('click', () => console.log('ul 클릭'));..