이벤트(Event) 흐름

이벤트 캡처링과 버블링까지

Table Of Contents

TL;DR

(브라우저) 이벤트(Event)

예시

이벤트 흐름

1. 캡처링 단계(Capturing Phase)

2. 타깃 단계(Target Phase)

3. 버블링 단계(Bubbling Phase).

버블링 중단하기: event.stopPropagation()

이벤트 핸들러(Event Handler)

이벤트가 발생했을 때, 이벤트에 반응하려면 핸들러를 할당해야 한다.

이벤트 핸들러 사용하기

1. (지양) 인라인 이벤트 핸들러(Inline event handler)

2. DOM의 이벤트 핸들러 프로퍼티

3. EventTarget.addEventListener() 메서드

divElement.addEventListener("click", (e) => console.log(1)); divElement.addEventListener("click", (e) => console.log(2)); // 1 // 2 // 순서대로 출력된다.

명세

EventTarget.addEventListener(type, listener); EventTarget.addEventListener(type, listener, options); EventTarget.addEventListener(type, listener, useCapture);

EventTarget이 지정한 type 유형의 이벤트를 수신할 때마다 호출할 함수listener를 지정한다.

참고