javascript event

지니씨·2023년 3월 3일

Delegation JavaScript addEventListener bubbling delegate event.currentTarget event.target 버블링 이벤트 위임 캡처링

프론트엔드

목록 보기

66/85

DOM Level 3 Events : https://www.w3.org/TR/DOM-Level-3-Events/#event-flow
JavaScript Event 순서 : https://www.quirksmode.org/js/events_order.html#link4

addEventListener

https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener

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

options

이벤트 리스너의 특징을 지정할 수 있는 객체

capture (기본값 false)
- 이벤트 캡쳐링 적용 여부
- true
  : DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 이벤트 리스너가 먼저 발동해야 함
once (기본값 false)
- 이벤트 한번만 호출하고 해제되는 옵션
- true
  : 이벤트 리스너가 한 번만 동작해야 함
  : 이벤트 리스너가 발동 후 스스로 대상에서 제거
passive (기본값 false)
- 스크롤 성능 향상을 위한 옵션으로 true일 경우 스크롤을 위해 블록되는 것을 방지 함
  (이 경우, preventDefault 사용 불가능 / 성능향상을 위해 브라우저의 기능을 프로그래밍으로 제어할 수 있다.)
- false인 경우에 touchstart, touchmove와 같은 이벤트가 발생하면 preventDefault를 이용하여 실제 이벤트 자체를 막을 수 있기 때문에, 브라우저는 scroll을 계속 할지 안할지를 매번 감시해야함 but passive속성이 true일 경우에는 preventDefault를 이용하여 scroll 이벤트를 막지 않겠다고 브라우저에게 이야기하는 것과 같음
- Chrome 54+부터 passive 속성이 특별한 상황(document또는 body에 이벤트 리스너를 추가할때 touchstart, touchmove와 같이 스크롤이 블록되는 이벤트인 경우, passive의 기본속성은 true가 됨)의 경우 기본값이 true로 설정 됨
- https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md
- 참고 : https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=crazymonlong&logNo=221580029479
- true
  : 이 수신기 내에서 preventDefault()를 절대 호출하지 않을 것임을 나타냄
  : true인데 수신기가 preventDefault()를 호출하는 경우, 사용자 에이전트는 콘솔에 경고를 출력하는 것 외에 아무런 동작도 하지 않습니다.
  : 기본 값은 false지만, Safari와 Internet Explorer를 제외한 브라우저에서 wheel (en-US), mousewheel (en-US), touchstart, touchmove (en-US) 이벤트에서의 기본 값은 true입니다. (참고)
// signal (AbortSignal) - 실험 기술로 브라우저 호환성 확인 필요
지정한 AbortSignal 객체의 abort() 메서드를 호출하면 이 수신기가 제거됩니다.
명시하지 않을 경우 이벤트 수신기가 아무 AbortSignal에도 연결되지 않습니다.

useCapture
: 이벤트 대상의 DOM 트리 하위에 위치한 자손 EventTarget으로 이벤트가 전달되기 전에, 이 수신기가 먼저 발동돼야 함을 나타내는 불리언 값
: 캡처 모드인 수신기는 DOM 트리의 위쪽으로 버블링 중인 이벤트에 의해선 발동하지 않습니다.
: 참고: 이벤트의 대상에 부착된 수신기의 경우 캡처링도, 버블링 단계도 아닌 별도의 단계에 발동합니다.
: 캡처 모드의 수신기는 캡처 모드가 아닌 다른 모든 수신기보다 앞서 발동합니다.

CustomEvent()

https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent

new CustomEvent(type)
new CustomEvent(type, options)

options
https://developer.mozilla.org/en-US/docs/Web/API/Event/Event

bubbles
이벤트 버블 여부를 나타내는 부울 값
cancelable (기본값 false)
https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable
이벤트를 취소할 수 있는지 여부를 나타내는 부울 값
composed (기본값 false)
https://developer.mozilla.org/en-US/docs/Web/API/Event/composed
shadow DOM 경계를 넘어 표준 DOM으로 전파되는지 여부를 나타내는 부울 값 (예시 참고)
detail (read-only 속성) 추가 가능
https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail

Event 막기

Event.preventDefault();
이벤트를 취소할 수 있는 경우(event.cancelable을 사용하여 이벤트 취소 가능 여부 확인), 이벤트의 전파를 막지 않고 해당 이벤트를 취소
해당 이벤트만 취소하며, 상위 요소의 이벤트가 호출되는 것은 막지 않음
Event.stopPropagation();
이벤트 캡쳐링과 버블링에 있어 해당 이벤트 이후의 전파 막음
해당 이벤트의 상위 요소에 걸린 이벤트가 호출되지 않음
Event.stopImmediatePropagation();
해당 이벤트와 같은 레벨에 걸린 이벤트가 다른 리스너에서 불려지는 것을 막음
현재 이벤트와 같은 레벨에 걸린 이벤트를 취소하며, 상위 요소의 이벤트가 호출되는 것도 막음

버블링(bubbling)

https://ko.javascript.info/bubbling-and-capturing

한 요소에서 이벤트 발생 -> 이 요소에 할당된 핸들러 동작
-> 부모 요소의 핸들러 동작 (가장 최상단 조상 요소를 만날때 까지 반복되면서 요소 각각에 할당된 핸들러 동작)

이벤트 버블링은 타깃 이벤트에서 시작해서 요소를 거쳐 document 객체를 만날 때까지 각 노드에서 모두 발생합니다. 몇몇 이벤트는 window 객체까지 거슬러 올라가기도 합니다. 이 때도 모든 핸들러가 호출됩니다.

그런데 핸들러에게 이벤트를 완전히 처리하고 난 후 버블링을 중단하도록 명령할 수도 있습니다.

이벤트 객체의 메서드인 event.stopPropagation()를 사용하면 됩니다.

꼭 필요한 경우를 제외하곤 버블링을 막지 마세요!
버블링은 유용합니다. 버블링을 꼭 멈춰야 하는 명백한 상황이 아니라면 버블링을 막지 마세요. 아키텍처를 잘 고려해 진짜 막아야 하는 상황에서만 버블링을 막으세요.

캡처링(capturing)

실제 코드에서 자주 쓰이진 않지만, 종종 유용한 경우가 있으므로 알아봅시다.

표준 DOM 이벤트에서 정의한 이벤트 흐름엔 3가지 단계가 있습니다.

캡처링 단계 – 이벤트가 하위 요소로 전파되는 단계
타깃 단계 – 이벤트가 실제 타깃 요소에 전달되는 단계
버블링 단계 – 이벤트가 상위 요소로 전파되는 단계

이벤트 위임 (Event Delegation)

이벤트 위임은 캡쳐링과 버블링을 이용한 것으로,
여러 엘리먼트마다 각각 이벤트 핸들러를 할당하지 않고, 공통되는 부모에 이벤트 핸들러를 할당하여 이벤트를 관리하는 방식이다

event.target
https://developer.mozilla.org/ko/docs/Web/API/Event/target
이벤트가 발생한 대상 객체
버블링과 캡처링 단계 event.currentTarget 과 다를 수 있습니다.
event.target 속성을 사용하여 이벤트 위임을 구현할 수 있습니다.

event.currentTarget
https://developer.mozilla.org/en-US/docs/Web/API/Event/currentTarget
이벤트 핸들러가 부착된 객체