과목명: 웹프로그래밍응용교재: 모던웹을 위한 JavaScript Jquery 입문, 한빛미디어

2014년 1학기

Professor Seung-Hoon Choi

Part2. jQuery Ch16. 이벤트

16 이벤트

jQuery 에서는– 자바스크립트보다 더 쉽게 이벤트를 연결할 수 있음

예– $(document).ready(function(event) { } )

16.1 이벤트 연결 기본

기본적인 이벤트 연결 방법– on( ) 메소드 이용

두 가지 형태– 1) $(selector).on(eventName, function(event){ })

eventName: 이벤트 이름

function(event): 이벤트 리스너– this 키워드: 이벤트 발생 객체를 나타냄

– 2) $(selector).on(object) object: 이벤트 이름을 속성으로, 이벤트 리스너를 속성의 값으로

갖는 객체

16.1 이벤트 연결 기본

예: 코드 16-2– 첫 번째 이벤트 연결 방법

– $(this): 이벤트 발생 객체

– $(selector).html(function(index,html)) html( ) 메소드를 이용하여 선택된 엘리먼트의 innerHTML 값을

변경함

function(index,html)– 선택된 엘리먼트의 새로운 innerHTML 값을 리턴하는 함수

– index: 선택된 엘리먼트의 인덱스

– html: 선택된 엘리먼트의 현재 innerHTML 값

16.1 이벤트 연결 기본

예: 코드 16-3, 16-4– 두 번째 이벤트 연결 방법을 사용함

– addClass( ): class 속성을 추가하는 메소드

– removeClass( ): class 속성을 제거하는 메소드

16.2 간단한 이벤트 연결

간단한 이벤트 연결 방식– 이벤트 이름을 메소드 이름으로 사용

– 예: ready( )

표 1-2– blur, focus, focusin, focusout, load

– resize, scroll, unload, click, dbclick

– mousedown, mouseup, mousemove, mouseover, mouseout

– mouseenter, mouseleave, change, select, submit

– keydown, keypress, keyup, error, ready

16.2 간단한 이벤트 연결

두 개의 이벤트를 동시에 연결하는 메소드도 있다.– 예: hover( )

mouseenter 이벤트와 mouseleave 이벤트를 동시에 연결함

코드 16-5– hover( )의 첫 번째 인자: mouseenter 이벤트 리스너

– hover( )의 두 번째 인자: mouseleave 이벤트 리스너

on( ) 메소드보다, 간단한 이벤트 연결 방법이 더 많이 사용됨

16.3 이벤트 연결 제거

off( ) 메소드– 이벤트 제거 시 사용함

– 3 가지 형태 1) $(selector).off( )

– 해당 문서 객체와 관련된 모든 이벤트를 제거함

2) $(selector).off(eventName)– 해당 문서 객체의 특정 이벤트와 관련된 모든 리스너를 제거함

3) $(selector).off(eventName, function)– 해당 문서 객체의 특정 이벤트와 관련된 특정 리스너를 제거함

16.3 이벤트 연결 제거

코드 16-7, 16-8– click 이벤트를 한 번만 처리하고 해제시킴

one( )– 이벤트를 한 번만 처리하고 해제시키는 메소드

16.4 매개변수 context

지금까지 사용한 $( ) 메소드에– selector 이외에 context 매개변수를 추가할 수 있음

– context 역할 selector가 적용되는 범위를 지정함

일반적으로 이벤트와 함께 사용함

코드 16-9, 16-10, 16-11– 클릭한 <div> 내부의 <h1>과 <p> 태그만 선택

var header = $(‘h1’, this).text( )

var paragraph = $(‘p’, this).text( )

– find( ) 메소드를 이용해서 구현할 수도 있음 선택된 엘리먼트의 자손들을 검색하는 메소드

코드 16-12

16.5 이벤트 객체

jQuery 이벤트 객체– 자바스크립트의 이벤트 객체와 유사함

표16-6 이벤트 객체의 속성– event.pageX: 브라우저 화면(웹 페이지)을 기준으로 한 마우스

의 X 좌표

– event.pageY: 브라우저 화면 (웹 페이지)을 기준으로 한 마우스의 Y 좌표

– event.preventDefault( ): 기본 이벤트를 제거함

– event.stopPropagation( ) : 이벤트 전달을 제거함

16.5 이벤트 객체

코드 16-13, 16-14, 16-15, 16-16– canvas 객체와 이벤트 객체를 이용하여 그림을 그리는 웹 페이

지

– jQuery는 canvas 태그를 정식으로 지원하지 않음 따라서, document.getElementById(‘canvas’)를 이용하여

canvas 객체를 얻어옴

– 구현 방법 canvas 객체에 대하여

– mousedown과 mouseup 이벤트 리스너를 구현함

offset( ) 메소드를 이용하여 canvas의 위치를 얻음– 선택된 엘리먼트의 웹 페이지 내에서의 좌표(top과 left)를 구하는 메

소드

16.5 이벤트 객체

코드 16-13, 16-14, 16-15, 16-16 (계속)– 구현 방법(계속)

마우스 클릭한 곳의 canvas 내에서의 x, y 좌표– x 좌표 = event.pageX - canvas의 left

– y 좌표 = event.pageY - canvas의 top

canvas의 context 객체의 메소드 이용– beginPath( ), moveTo( ), lineTo( ), stroke( ) 메소드를 이용하여

canvas 객체에 선을 그림

– 메소드 설명

• beginPath( ): 새로운 path를 시작하는 메소드

• moveTo(x, y): path를 (x, y) 지점으로 이동시키는 메소드

• lineTo(x, y): 이전 지점부터 (x, y) 지점까지 선을 생성시키는 메소드

• stroke( ): 정의된 path를 실제로 그리는 메소드

16.6 이벤트 강제 발생

trigger( )– 이벤트를 강제로 발생시키는 메소드

– 2 가지 형태 1) $(selector).trigger(eventName)

– 특정 이벤트를 발생시킴

2) $(selector).trigger(eventName, data)– 연결된 이벤트 리스너에 data를 전달함

– 일반적으로 data에는 배열을 넣어줌

코드 16-17, 16-18– 마지막 <h1> 태그에 1초마다 한 번씩 클릭 이벤트를 발생시

킴 $(‘h1’).last( ).trigger(‘click’);

16.7 기본 이벤트와 이벤트 전달

표16-8 이벤트 객체의 메소드– preventDefault( )

기본 이벤트를 제거하는 메소드 (return false; 와 동일함)

– stopPropagation( ) 이벤트 전달을 제거하는 메소드

코드 16-21, 16-22, 16-23– <a> 클릭 시 기본 이벤트를 제거하는 방법

$(‘a’).click( function(event) {

$(this).css(‘background-color’, ‘blue’);

event.preventDefault( );

} );

16.7 기본 이벤트와 이벤트 전달

코드 16-24– <a>에서 발생한 click 이벤트의 전달을 막음

코드 16-25– 이벤트 리스너에서 return false; 문장을 사용하면

stopPropagation( )과 preventDefault( )를 동시에 적용하는 것과동일한 효과를 가짐

16.8 이벤트 연결 범위 한정

on(types, selector, data, fn, one) 메소드 사용 시– 두 번째 매개변수를 이용하여 이벤트 범위를 한정할 수 있음

코드 16-26, 16-27– 새로 생긴 <h1> 태그를 클릭하면 아무 일도 일어나지 않음

– 이유 on( ) 메소드는 현재 존재하는 태그에만 이벤트를 연결하기 때문

16.8 이벤트 연결 범위 한정

코드 16-28– 상위 태그인 #wrap 태그에 이벤트를 연결

$(‘#wrap‘).on(‘click’, ‘h1’, function( ) { … } );

– 이벤트 리스너 연결 시, ‘h1’으로 범위를 지정해 줌 이벤트 리스너 안에서의 this는 class 속성이 wrap인 태그가 아니

라, h1 태그를 가리킨다는 것에 주의할 것

코드 16-29– 코드 16-28에서 연결했던 이벤트 리스너를 삭제

$(‘#wrap’).off(‘click’, ‘h1’);

코드 16-30– 상위 개념이 애매한 태그는 document 객체에 이벤트를 연결

16.9 마우스 이벤트

표16-11 마우스 이벤트– click: 마우스 클릭 시 발생

– dbclick: 마우스 더블 클릭 시 발생

– mousedown: 마우스 버튼 누를 때 발생

– mouseup: 마우스 버튼 뗄 때 발생

– mouseenter: 마우스가 요소의 경계 외부에서 내부로 이동 시 발생(마우스가 선택된 태그에 들어올 때만 발생함, mouseover와 다름)

– mouseleave: 마우스가 요소의 경계 내부에서 외부로 이동 시 발생

– mousemove: 마우스를 움직일 때 발생

– mouseout: 마우스가 요소를 벗어날 때 발생

– mouseover: 마우스가 요소 위로 이동할 때 발생(마우스가 선택된 태그의 자손 중 하나에 들어와도 발생함)

16.9 마우스 이벤트

코드 16-31– mouseover 이벤트와 mouseenter 이벤트의 차이를 보여줌

– mouseover는, 내부 태그로 들어가도 발생함 마우스 버블링과 유사함

현대에는 거의 사용하지 않음

mouseover이벤트 발생

mouseenter이벤트 발생

선택된문서 객체

16.10 키보드 이벤트

표16-12 키보드 이벤트– keydown: 키보드 키를 누를 때 발생함

– keypress: 글자가 입력될 때 발생함

– keyup: 키보드 키를 뗄 때 발생함

코드 16-32, 16-33– keyup 이벤트 발생 시 입력된 글자 개수 검사

16.10 키보드 이벤트

글자 입력시 발생하는 키보드 이벤트 순서– 1) 사용자가 키를 누릅니다.

– 2) keydown 이벤트 발생

– 3) 글자가 입력됨

– 4) keypress 이벤트 발생 (한글은 keypress 이벤트 지원하지 않음)

– 5) 사용자가 키보드에서 손을 뗀다.

– 6) keyup 이벤트 발생

코드 16-34– 입력된 글자의 개수가 150을 넘으면 남은 글자수를 빨간색으

로 표시함

16.11 윈도 이벤트

윈도 이벤트– window 객체와 document 객체, img 태그 등에서 사용할 수 있는 이

벤트

표16-13 윈도 이벤트– ready: 전체 웹페이지 로드가 완료되면 발생

– load: 특정 엘리먼트의 로드가 완료될 때 발생

– unload: 브라우저의 내용이 현재 페이지를 벗어날 때 발생 예: 다른 웹페이지로 가는 링크 클릭 시, forward/backward 버튼 누를 때,

현재 페이지가 reload 될 때, 주소창에 새로운 URL이 입력되었을 때, 브라우저를 닫을 때 등

– resize: 브라우저의 크기가 변화할 때 발생

– scroll: 특정 엘리먼트를 스크롤할 때 발생

– error: 에러가 있을 때 발생

16.11 윈도 이벤트

코드 16-35, 16-36, 16-37, 16-38– 스크롤이 끝까지 내려가면

window 객체의 scrollTop 속성과 height 속성을 합한 값이

document 객체의 높이와 같아집니다.

– $(window).scrollTop( ) window 객체의 수직 스크롤 바의 위치

문서의 내용 중 이미 스크롤된 부분의 양을 나타내는 값

– $(window).height( ) window 객체의 높이

– $(document).height( ) 문서 전체의 높이

16.12 입력 양식 이벤트

표16-14– change: 엘리먼트에 변화가 생겼을 때 발생

항목이 선택되거나 체크 상태가 바뀔 때

텍스트 필드에 내용이 바뀔 때

– focus: 엘리먼트가 포커스를 얻을 때 발생

– focusin: 엘리먼트 또는 그 자손이 포커스를 얻을 때 발생

– focusout: 엘리먼트 또는 그 자손이 포커스를 잃을 때 발생

– blur: 엘리먼트가 포커스를 잃을 때 발생

– select: text area 또는 text field에서 텍스트 선택 시 발생

– submit: submit 버튼을 누르면 발생

– reset: reset 버튼을 누르면 발생

16.12 입력 양식 이벤트

코드 16-39, 16-40– form 태그에서 발생하는 submit 이벤트를 이용하여

– 입력 값의 유효성을 검사함

– submit 이벤트의 기본 핸들러는 제거함 event.preventDefault( )

16.12 입력 양식 이벤트

코드 16-41– checkbox의 상태 변화 시 change 이벤트가 발생함

– children( ) 메소드 선택된 엘리먼트의 자손을 얻는 메소드

– prop( ) 메소드 선택된 엘리먼트의 속성 값을 얻거나 설정하는 메소드