[JavaScript] 이벤트

Event란?

- 이벤트는 웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미

- 클라이언트 측 자바스크립트를 비동기식 이벤트 중심의 프로그래밍 모델이라고 함

- 이벤트 타입(=event name)은 발생한 이벤트의 종류를 나타내는 문자열

- 이벤트 명세는 DOM Level3 이벤트 명세, HTML5 관련 이벤트 명세, 모바일 장치를 위한 이벤트 명세로 나누어 정의

Event Listener

- 이벤트 리스너란 이벤트가 발생했을 때 처리를 담당하는 함수를 가리킴(=event handler)

- 지정된 타입의 이벤트가 특정 요소에서 발생시 웹 브라우저는 그 요소에 등록된 이벤트 리스너를 실행

- 이벤트 리스너 등록: 이벤트의 대상이 되는 개체나 요소에 프로퍼티로 등록/객체나 요소의 메서드에 이벤트 리스너를 전달하는 방법

- 프로퍼티로 등록: JavaScript 코드에 프로퍼티 등록/HTML 요소의 속성으로 등록

- JavaScript 코드에 프로퍼티 등록시 이벤트 타입별로 하나의 이벤트 리스터만 등록

- 요소의 메서드에 등록: addEventListener()/removeEventListener(). 하나의 객체에 여러 개의 이벤트 리스너를 등록 가능

+) 프로퍼티 등록시 on이 붙은 이벤트 타입 사용. addEventListener() 메서드에서는 on이 붙지 않은 이벤트 타입 사용

대상요소.addEventListener(이벤트타입, 이벤트리스너, 전파방식);
- 이벤트타입: 등록할 이벤트 타입을 문자열로 전달
- 이벤트리스너: 실행할 이벤트 리스너. 함수명 전달
- 전파방식이 false라면 bubbling 방식, true라면 capturing 방식

대상요소.removeEventListener(이벤트타입, 이벤트리스너);

Event Propagation

- 이벤트 리스너는 인수로 이벤트 객체를 전달 받으며 식별자를 통해 전달 받은 이벤트 객체 참조

- 이벤트 객체(Event Object)는 특정 타입의 이벤트와 관련이 있는 객체. 해당 타입의 이벤트에 대한 상세 정보를 저장.

- 모든 이벤트 객체는 이벤트 타입을 나타내는 event.type 프로퍼티와 이벤트의 대상을 나타내는 event.target 프로퍼티를 가짐

- 이벤트 호출 순서: 객체나 요소에 프로퍼티로 등록한 이벤트 리스너를 먼저 호출 후 addEventListener() 메서드를 사용하여 등록한 이벤트 리스너를 순서대로 호출

- 전파 방식: bubbling 전파 방식/capturing 전파 방식

- bubbling 전파 방식: 이벤트가 발생한 요소로부터 시작해서 DOM 트리를 따라 위쪽으로 올라가며 전파되는 방식

- capturing 전파 방식: 이벤트가 발생한 요소까지 DOM 트리의 최상위로부터 아래쪽으로 내려가며 전파되는 방식. Window 객체의 리스너부터 시작. 이벤트 취소 기법으로 중간에 걸러내기 가능

- 이벤트 기본 동작 취소: event.preventDefault()나 returnValue 프로퍼티를 이용하면 기본 동작의 실행 취소 가능

- 이벤트 전파의 취소: event.stopPropagation()나 cancelBubble 프로퍼티를 이용하여 이벤트 전파 취소