Event

이벤트의 흐름

이벤트가 페이지에 전달되는 순서
화면의 버튼을 클릭하면
버튼 클릭 -> 버튼의 컨테이너 클릭 -> 페이지 전체도 클릭
➡️ 이를 위해 IE는 이벤트 버블링, 넷스케이프는 이벤트 캡쳐링을 지원

• 이벤트 버블링
  트리 위치 상 가장 깊은 곳까지 거슬러 올라가는 것
• 이벤트 캡처링
  최상위 노드에서 이벤트가 발생

DOM 이벤트 흐름

1. 이벤트 캡처링
2. 타깃
3. 이벤트 버블링

이벤트 핸들러

"on"으로 시작한다.
<input type="button" value="Click"/>

• DOM Lv0

btn.onclick=funciton(){
	//
}

• DOM Lv2
  • addEventListener()
    element.addEventListener('이벤트 타입', 콜백 함수)
  • removeEventListener()
    addEventListener로 만들 때 사용한 매개변수와 동일해야 함

크로스 브라우저 이벤트 핸들러

브라우저별 차이를 메우기 위해 커스텀 코드를 작성해야 함

Event 객체

• DOM과 관련된 이벤트 발생시 관련 정보는 모두 event 객체에 저장된다.
• 이벤트 핸들러에 전달되는 매개변수는 event 하나다.
• 속성 및 메소드
  • preventDefault()
    이벤트의 기본 행동을 취소
  • target : 이벤트 타깃. 실제 클릭된 요소
  • currentTarget
    이벤트 핸들러의 this와 일치
    현재 이벤트를 처리중인 element
  • type : 발생한 이벤트 타입
• 타입 (DOM LV3에서 도입됨)
  • UI 이벤트
    load, unload,resize, scroll
  • 포커스 이벤트
    blur, focus, focusIn, focusOut
  • 마우스 이벤트
    • click : 클릭 혹은 엔터키
    • dblclick: 더블 클릭
    • mousedown : 마우스 버튼을 누를 때 발생.
    • mouseenter : 마우스 커서가 요소 밖-> 안
    • mouseleave : 마우스 커서가 요소 안 -> 밖
    • mousemove : 마우스 커서가 위에서 이동하는 동안 지속 발생
    • mouseout : 마우스 커서가 요소 위에 있다가 다른 요소 위로 이동시
    • mouseover : 마우스 커서가 요소 경계 안으로 이동할 때
    • mouseup : 마우스 버튼을 누르고 있다가 놓았을때
  • 휠 이벤트
  • 키보드 이벤트
    keydown, keypress, keyup
  • 변경 이벤트 : DOM 구조 변경
    참고