S04. dom event

DOM Event

• EventTarget.addEventListener(‘EVENT_TYPE’, EVENT_HANDLER [, useCapture]);
  • EventTarget : element, window, document 등
  • EVENT_TYPE : click, mouseup 등
  • EVENT_HANDLER : 실행되는 함수
  • userCapture : capture 사용여부, true : capturing, false : Bubbling(default)
• 이벤트 핸들러엔 이벤트 객체가 첫번째 argument로 넘어온다. 예) function(e)
  • 이벤트 객체는 추가 정보들을 가지고 있고, 이 정보를 이용하여 여러가지 작업 수행
  • 추가 정보는 이벤트 종류에 따라 조금씩 차이가 있음
• event.type : 발생한 이벤트 종류
  • event.target : 최초 발생한 element 예) (e.target.id) : 발생한 이벤트 타켓 id
  • event.currentTarget : 발생된 이벤트가 등록되있는 element 예)(e.currentTarget.id) : 등록한 element id
  • event.preventDefault : 브라우저 기본 동작 방지하는 함수
  • event.stopPropagation : 해당 이벤트 흐름 중지시키는 함수
• Event 흐름
  • Capturing : 최상단부터 실행됨
  • Bubbling : 본인부터 타고 올라감
    • 이벤트 등록 시 capturing, bubbling 흐름을 선언해줘야 한다. (실무에서 capturing을 사용하는 경우는 거의 없다.)