[240604] 40장 이벤트 (3)

이벤트 전파

• DOM 요소 노드에서 발생한 이벤트는 DOM 트리를 통해 전파 ⇒ 이벤트 전파
• 이벤트 전파 단계
  • 캡쳐링 단계 : 이벤트가 상위 요소에서 하위 요소 방향으로 전파
  • 버블링 단계 : 이벤트가 하위 요소에서 상위 요소 방향으로 전파
  • 타깃 단계 : 이벤트가 이벤트 타깃에 도달
• 어트리뷰트/프로버티 방식으로 등록한 이벤트는 타깃 단계와 버블링 단계의 이벤트만 캐치 가능

• addEventListener 메서드 방식은 3번째 인수로 true 전달하면 캡처링 단계의 이벤트도 선별적으로 캐치 가능

• 이벤트는 이벤트를 발생시킨 이벤트 타깃은 물론 상위 DOM 요소에서도 캐치할 수 있다.

---

• 버블링을 통해 전파 되지 않는 이벤트
  • 포커스 이벤트 focur/blur (focusin/focusout 대체 가능)
  • 리소스 이벤트 load/unload/abort/error
  • 마우스 이벤트 mouseenter/mouseleave(mouseover/ mouseout 대체 가능)

  → 대체 가능하기 때문에 캡처링 단계에서 이벤트를 캐치해야 할 경우는 거의 없다.

이벤트 위임

• 여러 개의 하위 DOM 요소에 각각 이벤트 핸들러를 등록하는 대신 하나의 상위 DOM 요소에 이벤트 핸들러를 등록하는 방식이다.

function activate( {target} ) {
	if(!target.matches('#fruits > li')) return;
	[...$fruits.children].forEach($fruit => {
		$fruit.classList.toggle('active', $fruit === target);
		$msg.textContent = target.id;
	});
}

DOM 요소의 기본 동작 조작

1. DOM 요소의 기본 동작 중단

document.querySelector('a').onclick = e => {
	// a 요소의 기본 동작을 중단한다. 
	e.preventDefault();
}; 

2. 이벤트 전파 방지

document.querySelector('a').onclick = e => {
	// 이벤트 전파 중단 
	// 상위 요소에서 이벤트를 캐치할 수 없다. 
	e.stopPropagation();
};