용어 정리

• 이벤트(event) : 웹페이지에서 일어나는 모든 동작, 사건들을 말하는 단어.
• 이벤트 핸들링(event handling) : 이벤트가 일어났을 때 어떤 특정한 동작을 하도록 이벤트를 다루는 것.
• 이벤트 핸들러(event handler) : 어떤 특정한 동작을 나타낸 함수. 이벤트 발생에 대한 응답으로 실행되는 코드.
• 이벤트 리스너(event listener) : 이벤트 핸들러의 동의어로 보통 쓰이나, 엄밀히는 이벤트 발생을 수신하는 코드.
• 이벤트 버블링(event bubbling) : 이벤트가 동작했을 때 해당되는 요소 뿐 만 아니라 그 요소의 부모(및 조상) 요소들이 모두 이벤트 핸들러를 동작하는 현상.

이벤트 핸들러 추가

이벤트 핸들러를 다루기 전에 알아야 할 이벤트 핸들러의 중요한 속성은, 모든 이벤트 핸들러 함수에는 첫번째 인자(parameter)로 자기 자신 Event 객체가 들어간다. 주로 사용하는 이름은 e나 event이다. (python의 class method와 비슷)

html 내부 속성

<[tag명] [이벤트 속성]="[js 동작 코드]">

html 문서 내부에서 이벤트 속성을 통하여 이벤트 핸들러를 등록할 수 있으나 일반적으로 권장되는 방법은 아니다.

DOM 요소 Node property

[요소].[이벤트 속성] = [이벤트 핸들러 함수]

DOM에서 얻어낸 요소 Node에 이벤트 속성 property에 이벤트 핸들러(함수)를 할당하여 설정할 수 있다. 다만 기존의 핸들러를 활용하기는 어렵다.

DOM 요소 Node method

[요소].addEventListener([이벤트 이름], [이벤트 핸들러 함수])
[요소].removeEventListener([이벤트 이름], [이벤트 핸들러 함수])

주로 쓰이는 방식이며 DOM의 method를 이용하여 이벤트 핸들러(함수)를 추가하고 삭제한다.

• 이벤트 이름은 문자열이다.
• 이벤트 핸들러 함수 는 미리 선언해 둔 뒤에 이름으로 전달하라. 익명 함수의 경우엔 나중에 removeEventListener로 삭제할 수 없다.

이벤트 객체

웹 페이지에서 이벤트가 발생하면 자동적으로 Event 객체가 만들어진다.
이벤트 핸들러 함수에 자동적으로 들어가는 첫 인자(parameter)가 바로 Event 객체이다.

property

[이벤트 객체].[property 이름]

아래는 주로 쓰는 property를 일부 적어놓았다.

공통 (Event)

• type : 이벤트 이름 (property name)
• target : (처음) 이벤트가 발생한 요소. bubbling의 영향을 받지 않는다. (DOM의 요소 Node로 반환)
• currentTarget : 현재 이벤트가 발생한 요소. 정확히는 처음 이벤트 핸들러가 등록된 요소라고 생각하면 편하다. (DOM의 요소 Node로 반환)
• timeStamp : 브라우저라 로드된 시간부터의 time stamp
• bubbles : 버블링 단계인지 나타내는 Boolean 값

마우스 관련 (MouseEvent)

• relatedTarget : 마우스 이벤트의 2차 대상(이벤트가 발생하기 직전 or 직후에 위치해 있던 요소) (주로 이동 경로 파악에 사용)
• button : 누른 마우스의 버튼 종류
  • 0 : 메인 버튼 (주로 좌클릭)
  • 1 : 보조 버튼 (주로 휠/가운데 클릭)
  • 2 : 보조 버튼 (주로 우클릭)
• offsetX, offsetY : 이벤트 발생한 요소 기준 위치
• pageX, pageY : 문서 영역에서의 위치 (html 요소)
• clientX, clientY : 브라우저 창 기준 위치
• screenX, screenY : 모니터 화면 기준 위치
• altKey : 이벤트 발생 시 alt 키를 누르고 있었는지 나타내는 Boolean 값
• ctrlKey : 이벤트 발생 시 ctrl 키를 누르고 있었는지 나타내는 Boolean 값
• shiftKey : 이벤트 발생 시 shift 키를 누르고 있었는지 나타내는 Boolean 값
• metaKey : 이벤트 발생 시 meta키를 누르고 있었는지 나타내는 Boolean 값 (window는 window, mac은 cmd)

키보드 관련 (Keyboard Event)

• key : 누른 키가 가지고 있는 값
• code : 누른 키의 물리적 위치 값 (qwerty 기반)
• altKey : 이벤트 발생 시 alt 키를 누르고 있었는지 나타내는 Boolean 값
• ctrlKey : 이벤트 발생 시 ctrl 키를 누르고 있었는지 나타내는 Boolean 값
• shiftKey : 이벤트 발생 시 shift 키를 누르고 있었는지 나타내는 Boolean 값
• metaKey : 이벤트 발생 시 meta키를 누르고 있었는지 나타내는 Boolean 값 (window는 window, mac은 cmd)

method

아래는 주로 쓰는 method를 일부 적어놓았다.

bubbling 관련

stopPropagation()

[이벤트 객체].stopPropagation()

bubbling을 멈춘다.

기본 동작 차단

preventDefault()

[이벤트 객체].preventDefault()

태그 별 기본적인 동작을 막는다.

이벤트 종류

아래는 주로 사용되는 이벤트 일부를 작성해 두었다. 모든 이벤트가 궁금하다면 mdn 문서를 참고하라.

• scroll
  요소가 스크롤 되는 이벤트.
  window 객체의 scrollX, scrollY 등의 property와 자주 사용된다.

• resize
  창의 크기가 바뀌는 이벤트

• input
input, select, textarea 에 요소가 입력/변경되는 이벤트

• change
input, select, textarea 에 요소가 변경되는 이벤트. 입력이 시작되었을 때와 입력이 완료되었을 때 (focusout, enter 등) 변화가 있으면 발생한다. 정확한 내용은 여기를 참고하라.

• select
  입력 양식이나 텍스트를 선택하는 이벤트.

• submit
form 요소가 제출되는 이벤트.

• storage
  웹 스토리지(sessionStorage, localStorage)가 변경되는 이벤트. Web Storage에 대한 내용은 여기를 참고.

UI 이벤트 (UIEvent)

Event 객체를 상속 받는다.

마우스 이벤트 (MouseEvent)

UIEvent 객체를 상속 받는다.
마우스 관련 이벤트.

• click
  마우스의 기본 버튼(MouseEvent.button에서 0 버튼. 주로 좌클릭)을 눌렀다 떼는 이벤트. mousedown과 mouseup이 둘 다 일어난 후에 발생한다. mousedown과 mouseup이 발생한 요소가 다를 경우 두 요소의 가장 가까운 공통 조상에서 click 이벤트가 일어난다.

• dblclick
  마우스의 기본 버튼(MouseEvent.button에서 0 버튼. 주로 좌클릭)을 더블 클릭(click)하는 이벤트

• mousedown
  마우스를 누르는 이벤트

• mouseup
  마우스를 (눌렀다) 떼는 이벤트

• mousemove
  마우스를 움직이는 이벤트

• mouseover
  마우스 포인터가 요소 위에 올라오는 이벤트 (자식 요소도 개별로 감지)

• mouseout
  마우스 포인터가 요소에서 벗어나는 이벤트 (자식 요소도 개별로 감지)

• mouseenter
  마우스 포인터가 요소 위에 올라오는 이벤트 (버블링이 일어나지 않음)

• mouseleave
  마우스 포인터가 요소에서 벗어나는 이벤트 (버블링이 일어나지 않음)

포인터 이벤트 (PointerEvent)

MouseEvent 객체를 상속 받는다.

• contextmenu
  사용자가 context 메뉴를 열려고 할 때 발생하는 이벤트. 주로 우클릭으로 여는 메뉴를 말한다.

키보드 이벤트 (KeyboardEvent)

UIEvent 객체를 상속 받는다.
키보드 관련 이벤트.

• keydown
  키보드의 키를 누르는 이벤트

• keyup
  키보드의 키를 (눌렀다) 떼는 이벤트

포커스 이벤트 (FocusEvent)

UIEvent 객체를 상속 받는다.

• focusin
  요소가 포커스를 받았을 때의 이벤트.

• focusout
  요소가 포커스를 잃을 때의 이벤트.

• focus
  요소가 포커스를 받았을 때의 이벤트. (버블링이 일어나지 않음)

• blur
  요소가 포커스를 잃을 때의 이벤트. (버블링이 일어나지 않음)

이벤트 흐름

이벤트는 캡쳐링 > 타겟 > 버블링 순으로 일어난다.
간단히 말해서

1. 캡쳐링(capturing) 단계 : 이벤트가 하위 요소로 전파되는 단계
2. 타겟(target) 단계 : 이벤트가 실제 타깃 요소에 전달되는 단계
3. 버블링(bubbling) 단계 : 이벤트가 상위 요소로 전파되는 단계

이벤트 캡쳐링 (capturing)

한 요소에 이벤트가 발생했을 때 그 이벤트가 부모 요소들부터 타고 타겟(target)까지 전파되는 현상을 말한다.
window 객체부터 시작하여 Document 객체를 거쳐 부모 > 자식 순으로 내려간다.

• capturing 단계에서는 이벤트를 감지만 하고 발생시키지는 않는다.
• capturing 단계에서도 이벤트를 실행시키고 싶다면 이벤트 핸들러를 추가할 때 [요소].addEventListener([이벤트 이름], [함수], true) 형태로 추가하면 된다.

이벤트 타겟 (target)

이벤트가 발생한 요소 Node.

• [이벤트 객체].target으로 접근하였을 때 반환되는 요소가 바로 이 이벤트 target이다. 후술할 bubbling이 일어나도 target은 변하지 않는다.

이벤트 버블링 (bubbling)

한 요소에 이벤트가 발생했을 때 그 이벤트가 부모 요소들에게 전파(propagation)되는 현상을 말한다.
자식 > 부모 순으로 Document 객체와 window 객체까지 거슬러 올라간다.

• bubbling을 끊고 싶다면 [이벤트 객체].stopPropagation()를 활용하면 된다.

이벤트 위임 (Event Delegation)

앞서 말한 이벤트 버블링(혹은 캡쳐링)을 활용하여 이벤트가 발생한 target이 아닌 상위 노드에서 이벤트를 catch해 이벤트를 핸들링하는 것을 말한다.

• 주의할 점으론 자식 노드에만 event handling을 할 때 부모 요소 (event handler를 등록한 요소)에는 event handler가 작동하지 않게 해야 하니 조건을 잘 달아주자.