이벤트 리스너, 이벤트 위임

property event

GlobalEventHandlers.onclick - Web APIs | MDN

Web api event listener

EventTarget.addEventListener() - Web APIs | MDN

// event listener
const container = document.querySelector('.container');

container.onclick = () => {
  console.log('property event')
};

// 같은 이벤트에 여러 이벤트 리스너 등록 가능
container.addEventListener('click', () => {
  console.log('Web api event listener');
});

 

이벤트 위임 - 버블링, 캡쳐링

const container = document.querySelector('.container');

container.addEventListener('click', (e) => {
  console.log('e.target: ', e.target);
  console.log('e.currentTarget: ', e.currentTarget);
});

노란 박스, 초록 박스, 빨간 박스 차례로 클릭한 결과

클릭 이벤트를 상위 요소한테 걸면 이벤트 버블링에 의해 하위 요소가 클릭됐을 때 이벤트 버블링으로 상위 요소의 이벤트를 트리거한다.

-> 자식 요소 하나하나에 이벤트를 걸지 않고, 상위 요소에 이벤트를 걸고 어떤 자식 요소가 이벤트를 트리거했는지 알 수 있음.

이벤트 버블링 => 하위 요소에서 일어난 이벤트가 상위 요소로 올라가면서 이벤트를 트리거
이벤트 캡쳐링 => 상위 요소에서 일어난 이벤트가 타켓 요소까지 내려가면서 이벤트를 트리거