[JavaScript 요약 정리] 14. 이벤트(Event)

14. 이벤트(Event)

1) 이벤트(Event)

- 웹브라우저가 사용자와 상호작용 할 수 있도록 이벤트를 설정

- 웹 브라우저마다 이벤트 사용 방식이 다르기 때문에 JQuery등의 보완 라이브러리 사용

- 종류: 마우스, 키보드, HTML 프레임, HTML 입력양식, 유저 인터페이스, 구조 변화, 터치

- 용어

이벤트 이름 or 이벤트 타입 -> 이벤트의 이름

이벤트 리스너 or 이벤트 핸들러 -> 특정 요소의 이벤트 속성에 연결된 함수

이벤트 속성 -> 특정 요소에 이벤트를 직접 연결할 때 사용하는 속성

기본 이벤트 -> 요소 자체가 내장한 이벤트

이벤트 모델 -> 이벤트를 연결하는 방법

- 이벤트 모델의 종류

DOM Level 0 : 인라인 이벤트 모델, 기본 이벤트 모델

DOM Level 2 : IE 이벤트 모델, 표준 이벤트 모델

2) 고전 이벤트 모델(기본 이벤트 모델)

- 자바스크립트에서 document 객체의 이벤트 속성으로 이벤트를 연결하는 방법

- 이벤트 연결 방법

대상노드.onclick = function() {이벤트 코드};

- 고전 이벤트 모델은 이벤트 하나에 이벤트 리스너를 하나만 연결 가능

3) 인라인 이벤트 모델

- HTML 페이지의 가장 기본적인 이벤트 연결 방법

- 태그 줄 안에서 이벤트를 연결

- 이벤트 연결 방법

<태그 on이벤트명='이벤트핸들러'>

*이벤트이름은 on으로 시작함

4) 기본 이벤트 제거

- 일부 기본 이벤트를 내장한 태그의 이벤트를 제거하는 방법

- 고전 이벤트 모델 제거 방법

대상노드.제거할이벤트명=function () {return false;};

*이와 같은 방법으로 유효성 검사 가능

- 인라인 이벤트 모델 제거 방법

<태그 on이벤트명='return 이벤트핸들러()'>

5) 이벤트 전달

- 이벤트 버블링: 자식 노드부터 부모 노드 순으로 중복해서 이벤트를 실행하는 것

- 이벤트 캡쳐링: 버블링과 반대 방향(사용하지 않음)

- 이벤트 전달을 막는 방법

IE: event 객체의 cancelBubble=true; // 좌측과 같이 변경

그외: stopPropagation() 메소드 사용

6) IE 이벤트 모델

- 인터넷 익스플로러에서만 사용하는 이벤트 모델

- 여러개의 이벤트 연결 가능

- 메소드 종류

attachEvent(eventProperty, eventListener); // 이벤트 연결

detachEvent(eventProperty, eventListener); // 이벤트 제거

*이벤트 함수 내에서 this는 window를 가리킴

7) 표준 이벤트 모델

- W3C에서 공식 지정한 이벤트 모델

- 여러개의 이벤트 리스너 추가 가능

- 속성이 아닌 함수의 매개변수를 통해 입력

- 메소드

addEventListener(eventName, handler, useCapture) // 이벤트 핸들러 추가

removeEventListener(eventName, handler) // 이벤트 핸들러 제거

- 예시

header.addEventListener('click', function(){ 이벤트 핸들러 });

*표준 이벤트 모델 안의 this는 이벤트 발생 객체를 가리킴