과목명: 웹프로그래밍응용
교재: 모던웹을 위한 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( ) 메소드
선택된 엘리먼트의 속성 값을 얻거나 설정하는 메소드
