🐧jQuery Event Handle-1
📌$(selector).click(callback) : 선택자로 검색된 태그에서 클릭 이벤트가 발생되면 콜백함수(이벤트 처리 함수)를 호출하는 메소드
→ 이벤트 처리 함수를 등록하는 메소드
→ 단축형 : 검색 태그에서 발생되는 하나의 이벤트에 대한 이벤트 처리 함수 등록$("#btn").click(function() { $("#displayDiv").text("이벤트 처리 명령 실행"); });
📌$(selector).on(event,callback) : 선택자로 검색된 태그에서 클릭 이벤트가 발생되면 콜백함수(이벤트 처리 함수)를 호출하는 메소드
→ 이벤트 처리 함수를 등록하는 메소드
→ 일반형 : 검색 태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수 등록$("#btn").on("click",function() { $("#displayDiv").text("이벤트 처리 명령 실행"); });↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
◈ 태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수를 등록하기 위해 on 메소드의 매개변수에 JSON 형식의 Object 객체의 요소로 전달하여 등록 - 정석$("#btn").on({ "click":function() { $("#displayDiv").text("이벤트 처리 명령 실행"); } });
🐧jQuery Event Handle-2
🎨event this
📌이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체) 표현
$("ul li").click(function() { //이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체) 표현 var choice=$(this).text();//선택한 태그의 태그내용을 반환받아 변수에 저장 $("#menu").text(choice);//태그의 태그내용 변경 });
📃13_event_this.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <style type="text/css"> ul li { font-size: 1.2em; margin: 10px; } div { font-size: 1.5em; color: green; } #menu { font-weight: bold; color: red; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <h1>jQuery Event Handle</h1> <hr> <h2>저녁 메뉴를 선택해 주세요.</h2> <ul> <li>가정식 백반</li> <li>짜장면</li> <li>짬뽕</li> <li>설렁탕</li> <li>숙대국</li> <li>삼계탕</li> <li>쌀국수</li> <li>돈까스</li> </ul> <div>선택한 저녁 메뉴는 <span id="menu">???</span>입니다.</div> <script type="text/javascript"> $("ul li").click(function() { //이벤트 처리 함수에서 this 키워드는 이벤트가 발생된 태그(Element 객체) 표현 var choice=$(this).text();//선택한 태그의 태그내용을 반환받아 변수에 저장 $("#menu").text(choice);//태그의 태그내용 변경 }); </script> </body> </html>
🐧jQuery Event Handle-3
🎨event on
$("div").click(function() { $(this).css("color","red"); });
📌$(selector).mouseover(callback) : 선택자로 검색된 태그에 마우스 커서가 진입한 경우 콜백함수를 호출하는 메소드
$("div").mouseover(function() { $(this).css("background","yellow"); });
📌$(selector).mouseout(callback) : 선택자로 검색된 태그에 마우스 커서가 벗어날 경우 콜백함수를 호출하는 메소드
◈ css 메소드로 다수의 CSS 스타일을 변경할 경우 Object 객체로 표현하여 전달 가능
$("div").mouseout(function() { $(this).css({"color":"black","background":"white"}); });
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
📌선택자로 검색된 태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수는 on 메소드를 호출하여 등록하는 것을 권장
→ 다수의 이벤트에 대한 이벤트 처리 함수를 Object 객체의 요소로 표현하여 전달
$("div").on({ "click":function() { $(this).css("color","red"); }, "mouseover":function() { $(this).css("background","yellow"); }, "mouseout":function() { $(this).css({"color":"black","background":"white"}); } });
![](https://velog.velcdn.com/images/tmdguseod12/post/d037d2cc-4e55-49fd-bbb6-329e7bc61e10/image.png
📃14_event_on.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Insert title here</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <style type="text/css"> div { width: 350px; margin: 0 auto; padding: 50px; font-size: 1.2em; text-align: center; border: 1px solid black; } </style> </head> <body> <h1>jQuery Event Handle</h1> <hr> <div>마우스를 클릭하거나 이동해 보세요.</div> <script type="text/javascript"> /* $("div").click(function() { $(this).css("color","red"); }); //============================================================================== //$(selector).mouseover(callback) : 선택자로 검색된 태그에 마우스 커서가 진입한 경우 콜백함수를 호출하는 메소드 $("div").mouseover(function() { $(this).css("background","yellow"); }); //============================================================================== //$(selector).mouseout(callback) : 선택자로 검색된 태그에 마우스 커서가 벗어날 경우 콜백함수를 호출하는 메소드 $("div").mouseout(function() { //css 메소드로 다수의 CSS 스타일을 변경할 경우 Object 객체로 표현하여 전달 가능 $(this).css({"color":"black","background":"white"}); }); */ //↑랑 같은 결과 //선택자로 검색된 태그에서 발생되는 다수의 이벤트에 대한 이벤트 처리 함수는 on 메소드를 호출하여 등록하는 것을 권장 //→ 다수의 이벤트에 대한 이벤트 처리 함수를 Object 객체의 요소로 표현하여 전달 $("div").on({ "click":function() { $(this).css("color","red"); }, "mouseover":function() { $(this).css("background","yellow"); }, "mouseout":function() { $(this).css({"color":"black","background":"white"}); } }); </script> </body> </html>
🐧jQuery Event Handle-4
🎨event off
📌$(selector).off(event) : 선택자로 검색된 태그의 이벤트를 제거하는 메소드
→ 태그에 등록된 이벤트에 대한 이벤트 처리 함수 제거
$("#btn").off("click");
📃15_event_off.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> </head> <body> <h1>jQuery Event Handle</h1> <hr> <button type="button" id="eventOn">이벤트 처리 함수 등록 버튼</button> <button type="button" id="eventOff">이벤트 처리 함수 제거 버튼</button> <hr> <button type="button" id="btn">버튼을 눌러보세요.</button> <div id="displayDiv"></div> <script type="text/javascript"> /* $("#btn").click(function() { $("#display").text("이벤트 처리 함수의 명령 실행") }); */ $("#eventOn").click(function() { $("#displayDiv").text("이벤트 처리 함수 등록 성공"); // $("#btn").click(function() { $("#displayDiv").text("이벤트 처리 함수의 명령 실행"); }); }); //============================================================================== $("#eventOff").click(function() { //$(selector).off(event) : 선택자로 검색된 태그의 이벤트를 제거하는 메소드 // => 태그에 등록된 이벤트에 대한 이벤트 처리 함수 제거 $("#btn").off("click"); // $("#displayDiv").text("이벤트 처리 함수 제거 성공"); }); </script> </body> </html>
🐧jQuery Event Handle-5
🎨event false
event.preventDefault();//태그의 기본 이벤트 제거 event.stopPropagation();//태그의 이벤트 전달 중지↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑같은 결과값↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
📌이벤트 처리 함수에서 [false]를 반환하면 태그의 기본 이벤트를 제거하고 이벤트 전달 중지
return false;
📃16_event_false.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script> <style type="text/css"> div { width: 300px; margin: 0 auto; padding: 20px; text-align: center; border: 3px solid blue; } a, a:visited { text-decoration: none; padding: 10px; border: 3px solid red; } </style> </head> <body> <h1>jQuery Event Handle</h1> <hr> <div> <!-- a 태그는 클릭 이벤트에 의해 브라우저의 URL 주소를 변경하고 웹프로그램을 요청하여 응답 결과를 응답받아 출력하는 태그 - 태그의 기본 이벤트 --> <a href="https://www.daum.net">다음(Daum)</a> </div> <script type="text/javascript"> $("div").click(function() { $(this).css("background","aqua"); $(this).find("a").css("background","white"); }); //============================================================================== $("div").find("a").click(function() { $(this).css("background","yellow"); // /* event.preventDefault();//태그의 기본 이벤트 제거 event.stopPropagation();//태그의 이벤트 전달 중지 */ //↑보다 쉬운 방법 //이벤트 처리 함수에서 [false]를 반환하면 태그의 기본 이벤트를 제거하고 이벤트 전달 중지 return false; }); </script> </body> </html>
