DOM 요소들은 모두 eventTarget임
이벤트가 하위 요소로 전파되는 단계
실제 코드에서 자주 사용되지는 않음
이벤트가 상위 요소로 전파되는 단계
한 요소에서 이벤트가 발생하면, 이 요소에 할당된 핸들러가 작동하고
이어서 부모요소, 최상위 요소에까지 핸들러가 작동하는 현상
event.target: 실제 이벤트가 시작된 요소
this(event.currentTarget): ‘현재’ 요소로, 현재 실행 중인 핸들러가 할당된 요소를 참조
이벤트 버블링을 중단하고 싶을 때 사용
한 요소에 여러 핸들러가 있는 경우, 버블링은 계속 발생함
버블링을 멈추고, 다른 핸들러의 동작도 막고싶을 때 사용
만약 사람들이 페이지의 어디를 클릭했는지 행동 패턴을 분석하기 위해
window내에서 발생하는 모든 클릭이벤트를 감지하기로 결정
이 상황에서 이벤트 버블링을 막아놓은 영역에서는 분석 시스템 코드가 작동하지 않기 때문에 분석이 제대로 되지 않음
위와 같은 시나리오 뿐만아니라 이벤트 버블링을 막아야 할 경우는 거의 없다고 한다. 또한, 버블링을 막아야 해결되는 문제라면 커스텀 이벤트 등을 이용해 막을 수 있는 다른 수단도 있음
브라우저의 기본 기능을 취소할 때 사용 => 브라우저의 행동이 무시됨
예를 들어, 마우스 우클릭 시 나오는 기본 동작을 제어하고 싶을 때
활용할 수 있음
그렇지만, wheel 이벤트 핸들러와 같이 빠르게 동작해야하는 passive eventListener에서는 preventDefualt() 동작하지 않음
만약 ul태그 안에 있는 li태그들에 이벤트 핸들러를 등록하려는 경우,
const lis = document.querySelectorAll('li');
lis.forEach(li => li.addEventListener('click', ));
Array.forEach()를 사용해서 여러 요소에 이벤트 핸들러를 등록하는 것 보다는
const ul = document.querySelector('ul');
ul.addEventListener('click', (e) => {
if(e.target.tagName == "LI") {
e.target.classList.add('checked');
}
});
li의 상위 요소인 ul태그에 이벤트 핸들러를 등록하여 활용할 수 있다