간단한 이벤트 연결 jQuery 단축 이벤트 메서드 사용법 $(selector).method(function(event) { }); blur focus focusin focusout load resize scroll unload click dbclick mousedown mouseup mousemove mouseover douseout mouseenter mouseleave change select submit keydown keypress keyup error ready hover : mouseenter와 mouseleave를 동시에 사용
간단한 이벤트 연결 hover() 메서드
이벤트 객체 jQuery가 이벤트 객체 정형화 자주 사용하는 jQuery 이벤트 객체의 속성 같은 속성을 가짐 자주 사용하는 jQuery 이벤트 객체의 속성 이벤트 객체 속성 설명 event.pageX 브라우저의 화면을 기준으로 마우스 X 좌표 위치 event.pageY 브라우저의 화면을 기준으로 마우스 Y 좌표 위치
이벤트 객체 문서 객체와 마우스 커서의 상대 위치 구하는 방법
이벤트 강제 발생 trigger( ) 메서드 <html> <head> <style> .reverse {background:black;color:white} </style> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("h1").click(function() { $(this).html($(this).html() + "★"); }); setInterval(function() { $("h1").last().trigger("click"); }, 1000); </script> </head> <body> <h1>Start1 : </h1> <h1>Start2 : </h1> </body> </html>
기본 이벤트와 이벤트 전달 기본 이벤트 제거, 이벤트 전달을 막는 메서드 이벤트 객체 속성 설명 event.preventDefault() 기본 이벤트 제거 event.stopPropagation() 이벤트 전달 제거
기본 이벤트와 이벤트 전달 preventDefault() 메서드 <html> <head> <style> a {margin:5px; padding:5px; border:3px solid black} </style> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { $(this).css("background", "blue"); alert("이동 막기"); event.preventDefault(); }); </script> </head> <body> <h1> <a href="http://www.google.com">구글로 이동</a> </h1> </body> </html>
기본 이벤트와 이벤트 전달 stopPropagation() 메서드 <head> <style> a {margin:5px; padding:5px; border:3px solid black} </style> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { $(this).css("background", "blue"); alert("이동 막기"); event.preventDefault(); event.stopPropagation(); }); $("h1").bind("click", function() { alert("연쇄 작동"); </script> </head> <body> <h1> <a href="http://www.google.com">구글로 이동</a> </h1> </body>
기본 이벤트와 이벤트 전달 return false 사용 <head> <style> a {margin:5px; padding:5px; border:3px solid black} </style> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("a").click(function(event) { $(this).css("background", "blue"); alert("이동 막기"); return false; }); $("h1").bind("click", function() { alert("연쇄 작동"); </script> </head> <body> <h1> <a href="http://www.google.com">구글로 이동</a> </h1> </body>
현재 또는 미래에 존재하는 문서 객체에 이벤트 연결 이벤트 연결의 종류 메서드 설명 bind() 현재 존재하는 문서 객체에만 이벤트 연결 unbind() bind()로 연결된 이벤트 제거 delegate() 현재 또는 미래에 존재하는 문서 객체에 이벤트 연결 undelegate() delegate()로 연결된 이벤트 제거 live() die() die()로 연결된 이벤트 제거 one() 한번만 이벤트 연결 on() / off() 메서드로 대체
이벤트 연결의 종류 이벤트 메서드 bind() <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("h1").bind("click", function() { var length = $("h1").length; var targetHTML = $(this).html(); $("#wrap").append("<h1>" + length + "-" + targetHTML + "</h1>"); }); </script> </head> <body> <div id="wrap"> <h1>Header</h1> </div> </body> </html>
이벤트 연결의 종류 이벤트 메서드 on() <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $(document).on("click", "h1", function() { var length = $("h1").length; var targetHTML = $(this).html(); $("#wrap").append("<h1>" + length + "-" + targetHTML + "</h1>"); }); </script> </head> <body> <div id="wrap"> <h1>Header</h1> </div> </body> </html>
마우스 이벤트 이벤트 설명 click 마우스 클릭 dbclick 마우스 더블클릭 mousedown 마우스 버튼이 내려갈때 mouseup 마우스 버튼이 올라갈때 mouseenter 마우스가 해당 요소 내부로 들어갈때 mouseleave 마우스가 해당 요소 외부로 나갈때 mousemove 마우스가 움직일때 mouseout mouseover
마우스 이벤트 <html> <head> <style> .outer {width:200px;height:200px;background:orange;padding:50px} .inner {width:100%;height:100%;background:pink;} </style> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $(".outer").mouseover(function() { console.log("OVER"); }); $(".outer").mouseenter(function() { console.log("ENTER"); </script> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
키보드 이벤트 키보드 이벤트 이벤트 설명 keydown 키보드가 눌려질때 keypress 글자가 입력될때 keyup 키보드가 떼어질때
키보드 이벤트 동적으로 글자 수 세기 <html> <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("textarea").keyup(function() { var inputLength = $(this).val().length; var remain = 150 - inputLength; $("h1").html(remain); }); </script> </head> <body> <div> <p>글 작성</p> <h1>150</h1> <textarea cols="70" rows="5"></textarea> </div> </body> </html>
키보드 이벤트 키보드 이벤트의 실행 순서 1. 사용자가 키보드 누름 2. keydown 이벤트 발생 3. 글자 입력 4. keypress 이벤트 발생 5. 사용자가 키보드에서 손을 뗌 6. keyup 이벤트 발생 keydown 이벤트가 발생한 순간에는 글자가 입력돼 있지 않음
키보드 이벤트 글자 개수에 따른 스타일 변경 <head> <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> <script> $(document).ready(function() { $("textarea").keyup(function() { var inputLength = $(this).val().length; var remain = 150 - inputLength; $("h1").html(remain); if(remain >= 0) { $("h1").css("color", "black"); } else { $("h1").css("color", "red"); } }); </script> </head> <body> <div> <p>글 작성</p> <h1>150</h1> <textarea cols="70" rows="5"></textarea> </div> </body>
입력 양식 이벤트 입력 양식 이벤트
입력 양식 이벤트 submit 이벤트 입력 양식이 있어야 하므로 body 태그 구성
입력 양식 이벤트 submit 이벤트 form 태그에서 발생하는 이벤트 form 객체에 submit() 메서드 연결 유효성 검사를 할 때는 기본 이벤트 제거해야 함
입력 양식 이벤트 change 이벤트 type 속성이 checkbox와 radio인 input 태그의 상태 변경하는 이벤트