[TIL] JS: Event

이벤트 종류

1. UI Event

• load 웹페이지의 로드가 완료되었을 때
• unload 새로운 페이지를 요청한 경우 언로드 될 때
• error 브라우저가 오류일 때
• resize 브라우저 창의 크기를 조절했을 때
• scroll 페이지를 스크롤할 때
• select 텍스트를 선택했을 때

2. Keyboard Event

• keydown 키를 누르고 있을 때
• keyup 누르고 있던 키를 뗄 때
• keypress 키를 누르고 뗏을 때

3. Mouse Event

• click/dbclick 마우스 버튼을 클릭/더블클릭 했을 때
• mousedown/mouseup 마우스 버튼을 누르고 뗄 때
• mousemove/mouseover/mouseout 마우스를 움직일 때

🧩 더 알아보기

Event handler

1. Event handler

이벤트가 발생하기 전에는 실행되지 않다가 이벤트가 발생되면 실행되는 함수

• call Stact 호출스택
  작업이 요청되면 순차적으로 call stack에 쌓이게 되고 순차적으로 실행된다.
• Event Queue
  비동기식 이벤트핸들러. Timer 함수의 콜백함수가 보관되는 영역. 이벤트 루프에 의해 특정시점에 순차적으로 이동되어 실행된다.
• Event loop
  Call stack 내에서 현재 실행중인 task가 있는지, Event Queue에 task가 있는지 반복 확인한다.

2. 이벤트 핸들러 등록

• 프로퍼티 방식
  하나의 이벤트 핸들러만 바인딩할 수 있다.
• addEventListener 메소드 방식
  대상 DOM 요소에 이벤트를 바인딩하고 해당 이벤트가 발생했을 때 실행될 콜백 함수를 지정한다.

  EventTarget.addEventListener('eventType',functionName)

3. 이벤트의 흐름

• 캡처링
  자식요소에서 발생한 이벤트가 부모 요소부터 시작하여 자식요소까지 도달하는 것
• 버블링
  자식요소에서 발생하 이벤트가 부모 요소로 전파되는 것

4. Event Property

• Event.target 이벤트를 발생시킨 요소
• Event.currentTarget 이벤트에 바인딩된 DOM 요소.
• Event.type 이벤트의 종류를 나타내는 문자열을 반환한다.
• Event.cancelable 요소의 기본동작을 중단할 수 있는 지 여부를 나타낸다.

5. Event 위임

다수의 자식 요소에 각각 이벤트 핸들러를 바인딩하는 대신, 하나의 부모요소에 이벤트 핸들러를 바인딩하는 방법.

• 이벤트 흐름에 의해 버블링되기 때문!

6. 기본동작의 변경

• Event.preventDefault 요소가 가지고 있는 기본 동작을 중단시킨다.
• Event.stopPropagation 버블링을 중단시킨다.

jQuery에서 return false; 를 적용하면 기본동작과 버블링/캡쳐링의 중단을 동시에 실시할 수 있다.