Peter Cho

[DOM] Event

2018.08.01 | 0 Minute Read

이벤트 정의

  • javascript와 HTML 간의 상호작용을 담당
  • 옵져버 패턴으로 이벤트가 발생할 때만 리스너가 실행

이벤트 흐름

히스토리

  • DOM 이벤트 API는 DOM Level 2에서 논리적으로 표준화하려는 시도
  • DOM Level 2이 개정전 IE와 Netscape가 서로 정반대 이벤트 흐름을 채택함
  • IE는 이벤트 버블링, Netscape는 이벤트 캡쳐링을 지원

이벤트 버블링

  • 이벤트 흐름상 문서 트리에서 가장 깊이 위치한 요소에서 시작해 거슬러 올라감
  • 가장 깊이 위치한 요소에서 시작해 거슬러 흐르는 모양이 마치 거품이 올라가는 것 같아 버블링이라함

이벤트 캡처링

  • 최상위 노드에서 처음으로 이벤트가 발생하며 가장 명시적인 노드에서 마지막으로 발생
  • 이벤트 캡처링은 이벤트가 의도한 요소에 도달하기 전에 잡아채려는 목적으로 디자인

API

  • addEventListener/removeEventListener
  • ([이벤트 이름], [핸들러], [호출 시점 true: 캡쳐링, false: 버블링])