과목명 : 웹프로그래밍응용교재 : 모던웹을위한 JavaScript Jquery 입문, 한빛미디어 Part2. jquery Ch16. 이벤트 2014년 1학기 Professor Seung-Hoon Choi
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( ) 메소드 선택된엘리먼트의속성값을얻거나설정하는메소드