이벤트

과목명: 웹프로그래밍응용

교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어

2014년 1학기

Professor Seung-Hoon Choi

Part1. JavaScript / Ch11. 이벤트

11 이벤트



이벤트

– 키보드 입력이나 마우스 클릭과 같이 다른 것에 영향을 미치는 사건

– 사용자가 발생시킬 수도 있고, 애플리케이션이 스스로 발생 시 킬 수도 있음

– 이벤트 종류

 마우스 이벤트, 키보드 이벤트

 HTML 프레임 이벤트, HTML 입력 양식 이벤트

 유저 인터페이스 이벤트

 구조 변화 이벤트

 터치 이벤트

11.1 이벤트 관련 용어 정리



예: window.onload = function( ) { }

– 이벤트 이름 (이벤트 타입)

 load

– 이벤트 속성

 onload

– 이벤트 리스너(이벤트 핸들러)

 이벤트 속성에 할당된 함수



코드 11-2

11.2 고전 이벤트 모델



고전 이벤트 모델

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

– 코드 11-3, 11-4

 onclick 이벤트 속성에 이벤트 리스너 할당

– 코드 11-5

 문서 객체의 이벤트 속성에 null을 넣어줌으로써, 이벤트 리스너 를 제거함



고전 이벤트 모델은, 하나의 이벤트에 이벤트 리스너를 하나

만 연결할 수 있음

11.3 이벤트 발생 객체와 이벤트 객체



이벤트 발생 객체

– 이벤트를 발생시킨 객체를 의미함

– 이벤트 리스너에서 this를 사용하면, 이벤트 발생 객체를 알 수 있음

 코드 11-6

 코드 11-7

– 이벤트 리스너 내부에서 이벤트 발생 객체의 style을 변경함

11.3 이벤트 발생 객체와 이벤트 객체



이벤트 객체

– 발생한 이벤트에 대한 정보를 가지고 있는 객체

– 이벤트 리스너 정의 시 매개변수 e를 정의하면, e에 이벤트 객 체가 전달됨



코드 11-8

– 이벤트 리스너의 매개변수 e에 이벤트 객체가 전달됨

 document.getElementById(‘header’).onclick = function(e) { };

– 코드 설명: var event = e || window.event

 e가 존재하면 e를, e가 undefined이면 window.event를 event 변 수에 할당하라

 이 문장을 쓴 이유: 인터넷 익스플로러 8 이하 버전에서는 이벤트 객체가 window.event에 전달되었었기 때문.

11.4 이벤트 강제 실행



이벤트 속성이 이벤트 리스너를 할당하면,

– 이벤트 리스너는 함수 자료형이므로 – 이벤트 속성이 곧 함수가 된다.



코드 11-13

– 다음과 같이 buttonA 문서 객체에 이벤트 리스너를 할당하면

 buttonA.onclick = function( ) { }

– 다음과 같이 이벤트 속성을 함수처럼 호출할 수 있다.

 buttonA.onclick( );

11.5 인라인 이벤트 모델



인라인 이벤트 모델

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

– 태그 안에 직접 이벤트 속성 및 이벤트 리스너를 정의함 – 형식

 이벤트 속성 = ‘자바스크립트 코드＇



코드 11-16

– <h1 onclick = “alert(‘클릭’)”>Click</h1>



코드 11-17

– 여러 줄의 자바스크립트 코드도 가능함

 <h1 onclick="var alpha=10;alert(alpha);">Click</h1>

11.5 인라인 이벤트 모델



코드 11-18

– 여러 줄의 자바스크립트 코드 대신에 함수(이벤트 리스너)를 이용하면 좋다.

 <h1 onclick="whenClick(event)">Click</h1>

– 매개변수 event를 넣어서 호출해야, 이벤트 리스너에 이벤트 객체가 전달됨

11.6 디폴트 이벤트 제거



디폴트 이벤트

– 이벤트 리스너가 이미 정의되어 있는 이벤트 – 예: <a>

 클릭하면 다른 리소스(웹 페이지)로 이동함



디폴트 이벤트 제거

– false를 리턴하는 이벤트 리스너를 정의함 – 코드 11-20

 양식의 ‘submit’ 버튼을 클릭하면, 자동으로 입력 양식이 제출됨 (디폴트 이벤트)

 양식의 onsubmit 이벤트 속성에 false를 리턴하는 함수를 할당함 으로써, 디폴트 이벤트를 제거함

11.6 디폴트 이벤트 제거



코드 11-21

– 입력 양식의 유효성을 검사하는 이벤트 리스너를 정의함

 비밀번호 란과 비밀번호 확인 란의 값이 서로 같은지 검사

– 다르면 false를 return 함

11.7 이벤트 전달



이벤트 전달이란?

– 계층적 구조에 위치한 특정 엘리먼트에 이벤트가 발생한 경우 – 다른 엘리먼트로 그 이벤트가 전파되는 현상

– 예: 코드 11-23

 내부 <p>에 마우스 클릭 이벤트가 발생한 경우, 다른 엘리먼트로 이벤트가 전달된다.

11.7 이벤트 전달



이벤트 전달 방식

– 이벤트 버블링(bubbling)

 이벤트 발생 엘리먼트를 시작으로 최상위 엔리먼트까지 이벤트가 전달되는 방식

– 이벤트 캡처링(capturing)

 이벤트 발생 엘리먼트를 둘러싸는 최상위 엘리먼트를 시작으로 이벤트 발생 엘리먼트까지 이벤트가 전달되는 방식

 IE나 jQuery 등에서 지원하지 않음

11.7 이벤트 전달



이벤트 전달을 막아야 하는 경우가 있다.

– 예: 그림 11-9 미투데이 모바일

 사진기 아이콘을 마우스 클릭하는 경우,

– 상위 컨테이너로 이벤트 전달을 막아서, 댓글 화면이 보여지지 않음



이벤트 전달을 막는 방법

– 인터넷 익스플로러

 이벤트 객체의 cancelBubble 속성을 true로 변경함

– 그 이외의 브라우저

 이벤트 객체의 stopPropagation( ) 메소드를 사용함

– 예:

 코드 11-24, 코드 11-25

 코드 11-26 (이벤트 전달 제거)

11.8 인터넷 익스플로러의 이벤트 모델



인터넷 익스플로러의 이벤트 모델

– DOM Level 2 이벤트 모델 지원

 특정 이벤트 타입에 여러 개의 이벤트 핸들러를 할당할 수 있음

– 이벤트 핸들러 연결 메소드

 attachEvent(eventProperty, eventListener)

– eventProperty 인자: 이벤트 속성 이름이 사용됨(예: ‘onclick’)

– 이벤트 핸들러 제거 메소드

 detachEvent(eventProperty, eventListener)

11.9 표준 이벤트 모델



표준 이벤트 모델

– W3C에서 공식으로 지정한 DOM Level 2 이벤트 모델

 특정 이벤트 타입에 여러 개의 이벤트 핸들러를 할당할 수 있음

– 이벤트 핸들러 연결 메소드

 addEventListener(eventName, handler, useCapture)

– eventName 인자: 이벤트 이름이 사용됨(예: ‘click’) – useCapture 제공되지 않으면, 자동으로 false가 전달됨

– 이벤트 핸들러 제거 메소드

 removeEventListener(eventName, handler)

11.9 표준 이벤트 모델



코드 11-31

– 이벤트 핸들러 안에서의 this

 이벤트가 발생한 객체를 의미함



코드 11-32

– 이벤트 모델의 통합적 사용

 If( header.attachEvent ) { … } else { … }