JavaScript Event

Event 의 이해

Event model

: Event handler와 event API 정의

Web browser와 시기별로 3가지의 다른 event model 존재
- why?
  - web browser의 종류에 따라 변화되고 개선
Event model의 종류
- 기본 이벤트 모델 (Original event model)
  - 오래된 모델
  - IE 8 이하와 호환 안됨
  - 기술적으로 부족
  - DOM Level 0 event model
- 표준 이벤트 모델 (Standard event model)
  - 현재 IE 9 이상과 다른 모든 web browser에서 지원
  - DOM Level 2 event model
- 인터넷 익스플로러 이벤트 모델 (Internet Explorer event model)
  - IE 8 이하에서만 사용 가능한 모델
  - 다른 web browser에서 지원하지 않음
  - 더 이상 사용 안함

`.addEventListener()`

: DOM 객체에 event handler 함수를 적용

EventTarget.addEventListener (type, listener, [, useCapture]);
- type: 이벤트 유형
- listener: 이벤트 발생 시 실행할 callback 함수 (event handler)
- useCapture: 기본 값 (false), 상위 노드로 전파 (bubbling), 만약 true 인 경우 하위 node로 전파 (capturing)

`preventDefault()`

: Event 기본 기능 작동을 막음

`.removeEventListener()`

: Event handler 제거

짝이되는 addEventListener() 와 똑같은 세가지 인자를 가지고 있어야함

Event 전파

Event 전파의 3단계

document node에서 event 발생 node까지 내려가면서 event 전파
event 발생 node
event 발생 node에서 document node까지 올라가면서 event 전파

`.stopPropagation()`

: 이벤트 전파를 막는 이벤트 API

Event는 해당 요소에서 전파되며, capturing과 bubbling으로 구분된다
항상 capturing 부터 시작하여 bubbling으로 종료된다
addEventListener method의 세 번째 인자인 userCapture (false 가 default)를 통해 특정 상황에 대한 이벤트 관리가 가능하다

Event 객체와 this

: Event listener의 callback 함수에서 this를 활용하는 경우 event listener에 binding 되어 있는 요소가 지정된다

this와 target

Event handler가 호출하는 함수의 this의 역할

: 이벤트가 발생한 객체
event.target == this