Chapter 07. 이벤트 다루기. Lesson 02. 핵심 내용
WEB/JQUERY-CONCEPT 2017. 11. 12. 17:07 |Chapter 07. 이벤트 다루기.
Lesson 02. 핵심 내용
핵심 01: 일반 이벤트 등록
핵심 02: 단축 이벤트 등록
핵심 03: 등록한 이벤트 제거
핵심 04: 이벤트 한 번만 실행
핵심 05: 기본 행동 취소
핵심 06: 버블링 멈추기
핵심 07: 버블링 활용 1: 하나의 이벤트 리스너로 여러 이벤트 처리하기
핵심 08: 버블링 활용 2: 라이브 이벤트
핵심 09: 이벤트 발생시키기
핵심 10: 사용자 정의 이벤트 만들기
핵심 11: mouseover vs mouseenter 차이점
핵심 01: 일반 이벤트 등록
사용법 : $대상.on("이벤트 이름", 이벤트리스너)
예제 01. 확인 버튼을 누르면 "안녕하세요" 메세지를 출력해 주세요.
1 2 3 4 5 6 7 8 9 | $(document).ready(function() { // #btn에 클릭 이벤트 등록 $("#btn").on("click",function() { // 안녕하세요. 메시지 출력 alert("안녕하세요.") }) }) | cs |
예제 02. 클릭한 메뉴 항목을 출력해 주세요.
1 2 3 4 5 6 7 8 9 10 11 12 13 | $(document).ready(function() { // 메뉴 아이템에 클릭 이벤트 등록 $("ul.menu li").on("click", function() // 여러 개의 태그 노드에 이벤트를 등록하는 경우에도 on() 메서드를 사용하면 됩니다. { // 클릭한 메뉴 항목 출력 // 이때 이벤트 리스너의 this는 이벤트를 발생한 자바스크립트 노드 객체를 가리키며 // jQuery 기능을 사용하기 위해 $() 함수를 이용해 자바스크립트 노드 객체를 jQuery 객체로 변경해 사용합니다 alert($(this).html()); }) }); | cs |
1 2 3 4 5 6 7 8 9 10 | $(document).ready(function() { $("ul.menu li").each(function(index) { $(this).on("click",function() { alert($(this).html()); }); }); }); | cs |
핵심 02: 단축 이벤트 등록
사용법 : $대상.단축이벤트(이벤트리스너)
예를 들어 click 이벤트를 등록하는 경우 단축 이벤트 메서드를 사용하면
다음과 같이 click() 메서드를 이용해 간결하게 처리할 수 있습니다
- on() 메서드 사용
$대상.on("click",function(){})
- click() 메서드 사용
$대상.click(function(){})
예제 03. 확인 버튼을 누르면 "환영합니다". 메세지를 출력해 주세요
1 2 3 4 5 6 7 8 9 10 11 | <script> $(document).ready(function() { // 버튼에 클릭 이벤트 등록 $("#btn").click(function() { // 환영합니다. 메시지 출력 alert("환영합니다.") }) }) </script> | cs |
* 둘 중 여러분이 편한 방법을 사용하면 됩니다.
핵심 03: 등록한 이벤트 제거
사용법
$대상.off("click", 삭제하고 싶은 이벤트 리스너 명)
$대상.off("click")
$대상.off()
예제 04. 이벤트 제거 버튼(#btnOff)을 누르면 더 이상 이벤트 리스너가 동작하지 않도록 확인 버튼(#btn)에 등록한 이벤트를 제거해 주세요
1 2 3 4 | <body> <button id="btn">확인</button> <button id="btnOff">이벤트제거</button> </body> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> $(document).ready(function() { $("#btn").click(function() { alert("환영합니다.") }) $("#btnOff").click(function() { $("#btn").off("click"); }) }) </script> | cs |
핵심 04: 이벤트 한 번만 실행
사용법 : $대상.one(이벤트이름, 이벤트리스너)
이벤트를 오직 한 번만 실행하고 이후 실행되지 않게 이벤트를 제거하는 경우. one() 메서드를 사용
등록한 이벤트 리스너는 딱 한번 실행되고 자동으로 제거됩니다.
예제 05. 확인버튼(#btn)을 클릭하면 "환영합니다." 메세지를 출력해 주세요. 단, 이벤트 리스너는 오직 한번만 실행되게 만들어 주세요.
1 2 3 4 5 6 7 8 9 10 11 | <script> $(document).ready(function() { // #btn에 클릭 이벤트 등록 $("#btn").one("click",function() { // 환영합니다. 메시지 출력 alert("환영합니다.") }) }) </script> | cs |
핵심 05: 기본 행동 취소
사용법 : event.preventDefault();
모든 이벤트가 기본 행동을 취소할 수 있는 것은 아닙니다.
이벤트 발생 후 실행되는 기본 행동이 알려면 발생한 이벤트 객체의 cancleable 프로퍼티 값을 확인하면 됩니다.
이 값이 true인 경우 이벤트 실행 후 기본 행동이 실행된다는 의미입니다.
또한 이벤트 객체의 prepentDefault() 메서드를 이용해 기본행동이 실행되지 않게 할 수도 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script> $(document).ready(function() { // #test에 클릭 이벤트 등록 $("#test").one("click",function(e) { // 환영합니다. 메시지 출력 alert("환영합니다."); // 기본 행동 취소 e.preventDefault(); // 이 부분을 주석 처리한 후 실행하면, 기본 행동인 링크이동이 실행됩니다 // 정석적인 방법은 아니지만, preventDefault() 메서드 대신, "return false"를 이용하는 방법도 있습니다 }) }) </script> | cs |
이벤트 유형 | DOM 인터페이스 | 취소 가능 여부 (Cancleable 프로퍼티 값) | 기본 동작 |
abort | Event | 아니오 | 없음 |
beforeinput | InputEvent | 예 | DOM 요소를 갱신 |
blur | FocusEvent | 아니오 | 없음 |
click | MouseEvent | 예 | 상황에 따라 달라짐: 연관된 활성화 동작이 있는 타깃의 경우 해당 활성화 동작을 실행; 포커스를 받을수 있는 타깃의 경우 해당 요소에 포커스를 부여 |
compositionstart | CompositionEvent | 예 | 텍스트 구성 창을 표시 |
compositionupdate | CompositionEvent | 아니오 | 없음 |
compositionend | CompositionEvent | 아니오 | 없음 |
dblclick | MouseEvent | 아니오 | 상황에 따라 달라짐: 연관된 활성화 동작이 있는 타깃의 경우 해당 활성화 동작을 실행; 포커스를 받을수 있는 타깃의 경우 해당 요소에 포커스를 부여; 선택된 타깃의 경우 해당 요소의 콘텐츠의 일부나 전체를 선택 |
error | Event | 아니오 | 없음 |
focus | FocusEvent | 아니오 | 없음 |
focusin | FocusEvent | 아니오 | 없음 |
focusout | FocusEvent | 아니오 | 없음 |
input | InputEvent | 아니오 | 없음 |
keydown | KeyboardEvent | 아니오 | 상황에 따라 달라짐: beforinput과 input 이벤트; 텍스트 구성 시스템을 실행; blur와 focus 이벤트; keypress 이벤트; 활성화 동작; 기타 이벤트 |
keyup | KeyboardEvent | 예 | 없음 |
load | Event | 아니오 | 없음 |
mousedown | MouseEvent | 예 | 상황에 따라 달라짐: 드래그/드롭 동작을 시작; 텍스트 선택을 시작; 스크롤/팬 동작을 시작(마우스 가운데 버튼이 지원될 경우 마우스 가운데 버튼을 통해) |
mouseenter | MouseEvent | 아니오 | 없음 |
mouseleave | MouseEvent | 아니오 | 없음 |
mousemove | MouseEvent | 예 | 없음 |
mouseout | MouseEvent | 예 | 없음 |
mouseover | MouseEvent | 예 | 없음 |
mouseup | MouseEvent | 예 | 컨텍스트 메뉴 호출(마우스 오른쪽 버튼이 지원될 경우 마우스 오른쪽 버튼을 통해) |
resize | Ulevent | 아니오 | 없음 |
scroll | Ulevent | 아니오 | 없음 |
select | Event | 아니오 | 없음 |
unload | Event | 아니오 | 없음 |
wheel | WheelEvent | 예 | 문서를 스크롤(또는 줌) |
핵심 06: 버블링 멈추기
이벤트 유형 | 버블링 단계 (bubble 프로퍼티 값) | DOM 인터페이스 |
abort | 아니오 | Event |
beforeinput | 예 | InputEvent |
blur | 아니오 | FocusEvent |
click | 예 | MouseEvent |
compositionstart | 예 | CompositionEvent |
compositionupdate | 예 | CompositionEvent |
compositionend | 예 | CompositionEvent |
dblclick | 예 | MouseEvent |
error | 아니오 | Event |
focus | 아니오 | FocusEvent |
focusin | 예 | FocusEvent |
focusout | 예 | FocusEvent |
input | 예 | InputEvent |
keydown | 예 | KeyboardEvent |
keyup | 예 | KeyboardEvent |
load | 아니오 | Event |
mousedown | 예 | MouseEvent |
mouseenter | 아니오 | MouseEvent |
mouseleave | 아니오 | MouseEvent |
mousemove | 예 | MouseEvent |
mouseout | 예 | MouseEvent |
mouseover | 예 | MouseEvent |
mouseup | 예 | MouseEvent |
resize | 아니오 | Ulevent |
scroll | 아니오/예 | Ulevent |
select | 예 | Event |
unload | 아니오 | Event |
wheel | 예 | WheelEvent |
예제 07. 풀이 전 코드에서 각각의 버튼을 누르면, 실행화면처럼 메세지가 출력될 수 있게 버블링 관련 기능을 이용해 코드를완성해 주세요.
실행화면
버블링처리 버튼(#btn1)을 누른 경우
02. 버블링 처림
01. #panel에 등록한 클릭이벤트
버블링중지 버튼(#btn2)을 누른 경우
03. 버블링 중지
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script> $(document).ready(function() { // #panel에 클릭 이벤트 등록 $("#panel").click(function(e) { // 메시지 출력 console.log("01. panel에 등록한 클릭 이벤트.") }); // #btn1에 클릭 이벤트 등록 $("#btn1").click(function(e) { // "02. 버블링 처리" 메시지 출력 console.log("02. 버블링 처리"); }); // #btn2에 클릭 이벤트 등록 $("#btn2").click(function(e) { // "03. 버블링 중지" 메시지 출력 console.log("03. 버블링 중지"); // 버블링 중지 e.stopPropagation(); }) }) </script> | cs |
핵심 07: 버블링 활용 1: 하나의 이벤트 리스너로 여러 이벤트 처리하기
사용법 : $대상.on("이벤트명","선택자",이벤트 리스너)
예제 08. 먼저 다음에 등장하는 풀이전 코드는 '핵심 01: 일반 이벤트 등록, 예제 02'에서 다룬 예제로서 클릭한 메뉴 항목을 출력하는 예제이다.
풀이 01: on() 메서드를 이용하는 방법
1 2 3 4 5 6 7 8 9 10 11 | <script> $(document).ready(function() { // 메뉴 항목에 클릭 이벤트 등록 $("ul.menu li").on("click", function() { // 클릭한 메뉴 아이템의 정보 출력 alert($(this).html()); }) }); </script> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script> $(document).ready(function() { // 메뉴에 클릭 이벤트 등록 $("ul").on("click", function(e) { console.log("테스트용 = "+e.target.tagName); // 실제 이벤트를 발생한 노드(target 속성)가 <li> 태그인 경우만 처리 // 가장 쉽게 해결할 수 있는 방법은 버블링을 이용하는 것입니다. // 풀이처럼 <li>의 상위 태그인 <ul> 태그에 click 이벤트를 등록하면 ' // <li> 태그 클릭 시 이벤트가 흘러(버블링) <ul> 태그에 등록된 이벤트 리스너가 실행됩니다. if(e.target.tagName=="LI") // 이때 리스너 내부에서 이벤트 객체의 target(이벤트를 발생시킨 노드 객체) 속성을 활용해 이벤트를 발생한 객체가 <li> 태그일 때만 메세지를 띄어줍니다. { // 클릭한 메뉴 아이템의 정보 출력 alert($(e.target).html()); } }) }); | cs |
1 2 3 4 5 6 7 8 | <body> <ul class="menu"> <li>menu1</li> <li>menu2</li> <li>menu3</li> <li>menu4</li> </ul> </body> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <script> $(document).ready(function() { // jQuery 이벤트 메서드를 활용한 클릭 이벤트 처리 $("ul").on("click", "li", function(e) // 기존 on() 메서드와 달리 두 번째 인자에 리스너 대신 이벤트 처리를 원하는 선택자를 넣어 주고, 이벤트 리스너는 세 번째 인자에 넣어주세요. { console.log("테스트용 = "+e.target.tagName); // 클릭한 메뉴 아이템의 정보 출력 alert($(e.target).html()); }) }); </script> | cs |
핵심 08: 버블링 활용 2: 라이브 이벤트
예제 09. 다음 예제는 동적으로 메뉴 항목을 추가하고 메뉴 항목 클릭 시 클릭한 메뉴 항목을 알려주는 예제입니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | <script> $(document).ready(function(){ // 신규 메뉴 항목 추가 var $menu = $("ul.menu"); // 카운트 변수 추가 var count=0; // #add 버튼에 클릭 이벤트 등록 $("#add").click(function() { // 카운트 증가 count++; // 신규 메뉴 항목 추가 $menu.append("<li>new"+count+"</li>"); }) // 메뉴 항목에 클릭 이벤트 등록 $("ul li").click(function() { // 클릭한 메뉴의 정보 출력 alert($(this).html()); }) }); </script> | cs |
먼저 코드를 실행한 후 메뉴 항목을 클릭 - > 클릭한 메뉴 항목이 알림 창으로 출력된다
메뉴 추가 버튼을 클릭후, 추가된 메뉴 항목 클릭 -> 알림창 출력이 되지 않는다
-> 이벤트를 등록하는 시점에 신규 메뉴 항목은 존재하지 않아 이벤트가 등록되지 않기 때문이다.
방법 01. 메뉴 항목 추가와 동시에 이벤트 등록
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <script> $(document).ready(function() { // 신규 메뉴 항목 추가 var $menu = $("ul.menu"); // 카운트 변수 추가 var count=0; // #add 버튼에 클릭 이벤트 등록 $("#add").click(function() { // 카운트 증가 count++; // 신규 메뉴 항목 생성 var $newItem = $("<li>new"+count+"</li>"); //이벤트 등록 $newItem.on("click",function() { alert($(this).html()) }); // 메뉴 항목 추가 $menu.append($newItem); }) // 선택한 메뉴 항목 출력 $("ul li").on("click",function() { alert($(this).html()) }) }); </script> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | <script> $(document).ready(function() { // 신규 메뉴 항목 추가 var $menu = $("ul.menu"); // 카운트 변수 추가 var count=0; // #add 버튼에 클릭 이벤트 등록 $("#add").click(function() { // 카운트 증가 count++; // 신규 메뉴 항목 생성 var $newItem = $("<li>new"+count+"</li>"); // 메뉴 항목 추가 $menu.append($newItem); }) // jQuery on() 메서드를 활용해 li에 click live 이벤트 등록 $("ul").on("click", "li", function() // 기존 on() 메서드의 두 번째 인자 값에 메뉴 항목을 의미하는 "li"을 추가 { // 클릭한 메뉴의 정보 출력 alert($(this).html()); }) }); </script> | cs |
핵심 09: 이벤트 발생시키기
사용법 : $대상.trigger("이벤트이름")
예제 10. 다음 문서에서 버튼A를 누르면 버튼B를 눌린 것처럼 이벤트 리스너가 실행되게 만들어 주세요.
실제 마우스를 클릭하지 않았지만 클릭한 것처럼 특정 노드에서 수동으로 이벤트를 발생시켜야 하는 경우가 있습니다
jQuery 이벤트 메서드 중 trigger()을 이용하면 수동으로 이벤트를 발생시킬 수 있습니다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | <script> $(document).ready(function() { // #btnA에 클릭 이벤트 등록 $("#btnA").on("click",function() { //이벤트 발생 $("#btnB").trigger("click"); }) // #btnB에 클릭 이벤트 등록 $("#btnB").on("click",function() { console.log("버튼B가 눌렸습니다."); }) }) </script> | cs |
1 2 3 4 5 6 7 8 9 10 | 방법1 var event = jQuery.Event("이벤트이름"); [event.데이터1=값; evnet.데이터2=값; ...] $대상.trigger(event); 방법2 var event = jQuery.Event("이벤트이름"); $대상.trigger(event[데이터1=값, 데이터2=값, ...]); | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <script> $(document).ready(function() { // #output 찾기 var $output = $("#output"); // .menu 찾기 var $menu = $("ul.menu"); // 카운트 변수 추가 var count=0; // #add 버튼에 클릭 이벤트 등록 $("#add").click(function() { // 카운트 증가 count++; // 신규 메뉴 항목 생성 var $newItem = $("<li>new"+count+"</li>"); // 메뉴 항목 추가 $menu.append($newItem); // 여기에 풀이 입력 // 1단계. 이벤트 객체 생성 var event = jQuery.Event("addItem"); // 2단계. 이벤트 데이터 생성 (신규로 생성한 메뉴 아이템, 메뉴 아이템 이름, 현재 메뉴 개수를 이벤트에 담는다) event.item = $newItem; event.itemName = $newItem.text(); event.itemLength = $menu.children().length; // 3단계. 이벤트 발생 $menu.trigger(event); }) // addItem 이벤트 리스너 등록 $menu.on("addItem", function(e) // 2단계에서 이벤트에 담은 데이터는 이벤트의 매개변수인 e에 담겨 넘어온다 { $output.prepend("<p>추가 아이템 = "+e.itemName+", 아이템 개수 = "+e.itemLength+"</p>"); }) }); </script> | cs |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <script> $(document).ready(function() { // #output 찾기 var $output = $("#output"); // .menu 찾기 var $menu = $("ul.menu"); // 카운트 변수 추가 var count=0; // #add 버튼에 클릭 이벤트 등록 $("#add").click(function() { // 카운트 증가 count++; // 신규 메뉴 항목 생성 var $newItem = $("<li>new"+count+"</li>"); // 메뉴 항목 추가 $menu.append($newItem); // 1단계. 이벤트 객체 생성 var event = jQuery.Event("addItem"); // 2단계. 이벤트 데이터 생성 // 방법2에서는 이벤트 리스너로 넘길 데이터를 이벤트 객체에 포장하는 게 아니라 // trgger() 메서드의 매개변수 값으로 넘겨 호출한다는 점이 다릅니다. 보낼 데이터를 배열로 만듭니다. var data = [$newItem, $newItem.text(), $menu.children().length]; // 3단계. 이벤트 발생 $menu.trigger(event, data); }) // addItem 이벤트 리스너 등록 trigger()에 담아 보낸 배열 데이터는 이벤트 리스너의 두 번째 매개변수부터 차례대로 담기게 됩니다. $menu.on("addItem", function(e, $item, itemName, itemLength) { $output.prepend("<p>추가 아이템 = "+itemName+", 아이템 개수 = "+itemLength+"</p>"); }) }); </script> | cs |
핵심 11: mouseover vs mouseenter 차이점
mouseover/mouseout
마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트입니다.
만약 내부에 자식 노드가 있는 경우 자식 노드에서는 이벤트가 발생하지 않습니다.
즉, 자식 노드는 독립적인 노드로 처리됩니다.
mouseenter/mouseleave
마우스 커서가 노드에 들어오거나 노드 밖으로 나가면 발생하는 이벤트입니다.
만약 내부에 자식 노드가 있는 경우 자식 노드에서는 이벤트가 발생하지 않습니다.
즉, 자식 노드는 부모 노드의 일부분으로 처리됩니다.
예제 12. mouseover/mouseout 이벤트 동작 테스트
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <script> var count=0; var $info = null; var $child = null; $(document).ready(function() { $info = $("#info"); $child = $("#child"); $("#parent").mouseover(function(e) { count++; $info.html($info.html()+"<br>"+count+", "+e.target.id+".over"); }); $("#parent").mouseout(function(e) { count++; $info.html($info.html()+"<br>"+count+", "+e.target.id+".out"); }); }); </script> </head> <body> <div id="info"> 여기에 이벤트 정보가 출력될 거에요. </div> <div id="parent"> parent <div id="child"> child </div> </div> </body> </html> | cs |
mouseover/mouseout 이벤트의 경우 parent 내부에 child가 포함 관계라 하더라도 독립적인 노드로 판단해 이벤트가 수없이 발생됩니다.
이 문제점을 해결하려면 mouseover/mouseout 이벤트 대신 mouseenter/mouseleave 이벤트를 사용해야 합니다.
예제 14. mouseenter/mouseleave 이벤트 동작 테스트
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <script> var count=0; var $info = null; var $child = null; $(document).ready(function() { $info = $("#info"); $child = $("#child"); $("#parent").mouseenter(function(e) // mouseover -> mouseenter { count++; $info.html($info.html()+"<br>"+count+", "+e.target.id+".over"); }); $("#parent").mouseleave(function(e) // mouseout -> mouseleave { count++; $info.html($info.html()+"<br>"+count+", "+e.target.id+".out"); }); }); </script> </head> <body> <div id="info"> 여기에 이벤트 정보가 출력될 거에요. </div> <div id="parent"> parent <div id="child"> child </div> </div> </body> </html> | cs |
예제 13. mouseover/mouseout 이벤트 문제점 테스트
예제 15. mouseenter/mouseleave 이벤트를 활용한 애니메이션 처리
// 두 예제는 이해를 못해서 그냥 패스함
'WEB > JQUERY-CONCEPT' 카테고리의 다른 글
| Chapter 08. 위치/크기 관련 기능 다루기. Lesson 02. 문서의 위치 및 크기 관련 기능 (0) | 2017.11.14 |
|---|---|
| Chapter 08. 위치/크기 관련 기능 다루기. Lesson 01. 요소의 위치 및 크기 관련 기능 (0) | 2017.11.13 |
| Chapter 06. 속성 다루기. Lesson 01. 속성 소개. Lesson 02. 핵심 내용 (0) | 2017.11.10 |
| Chapter 05. 스타일 다루기. Lesson 02. 핵심내용 (0) | 2017.11.10 |
| Chapter 05. 스타일 다루기. Lesson 01. 스타일 소개 (0) | 2017.11.10 |