자바스크립트+jQuery 완전정복 스터디 2권 (JQuery 기초와 활용)
스터디 정리
이벤트 다루기
1. 이벤트 단계
단계1. 캡처 단계
단계2. 캡처 단계
단계3. 버블링 단계
이벤트 흐름은 오직 DOM 노드 객체를 따라 이동한다. 사용자가 만든 객체에서는 절대 일어나지 않을뿐더러 이벤트를 흐르게 할 수도 없다.
eventPhase 프로퍼티
1=캡처 단계 2=타깃 단계 3=버블링 단계
01. 단계1 캡처 단계
최상위 노드인 document에서 시작해서 <html> 태그와 <body>태그를 거쳐 실제 이벤트를 발생시킨 노드 전까지 흐른다. 흐르면서 만나는 노드 중 캡처 단계에 이벤트 리스너가 등록 돼 있다면 이벤트 리스너가 실행된다.
이벤트 등록방법
$대상.get(0).addEventListener(이벤트이름, 리스너, true);
jquery는 캡처 단계에 이벤트를 등록하는 기능을 제공하지 않는다. 자바스크립트에서 캡처 단계에 이벤트를 등록하는 방법은 addEventListener()마지막 인자 값에 true를 넣어준다.
캡처 단계는 타깃/버블링 단계의 이벤트 실행 전에 처리해야 할 사전 작업 또는
타깃/버블링 단계 이벤트 처리를 제어하는 용도로 사용한다.
02 단계2 타깃 단계
이벤트 흐름이 이벤트를 발생시킨 노드에 머무르는 단계
jquery 이벤트 관련 메서드를 사용해 이벤트를 등록 하는 경우 기본적으로 타깃과 버블 단계에 등록된다.
이벤트 등록방법
$대상.on(이벤트이름, 리스너);
*자바스크립트 이벤트 등록 방법 :
대상.addEventListener(이벤트이름, 리스너, false);
03. 단계3 버블단계
버블 단계는 캡처 단계의 역순으로 흐르는 단계
캡처단계의 노드를 시작으로 역순으로 흐르며 이때 만나는 노드에 버블 단꼐의 이벤트가 등록돼 있다면 리스너가 실행된다.
이벤트 등록방법
$대상.on(이벤트이름, 리스너);
타깃, 버블 단계 이벤트를 등록하는 방법은 동일하다.
구분하기 위해서는 Event객체의 eventPhase 속성을 사용한다.
04. Event 객체
04-1. Event객체의 용도
이벤트를 발생시키는 곳에서 이벤트와 관련된 정보를 담아 외부로 보낼 떄 사용하는 일종의 저장소
04-2. Event 핵심 프로퍼티와 메서드
2. 이벤트 핵심내용
01. 일반 이벤트 등록
$대상.on("이벤트이름", 이벤트리스너)
$("ul.menu li").on("click", function(){});
위 와 같은 이벤트는 사실 각각 <li>노드에 이벤트가 등록되는 것이다.
== $("ul.menu li).each(function(index){
$("ul.menu li").on("click", function(){});
});
02. 단축 이벤트 등록
$대상.단축이벤트(이벤트리스너)
ex)$대상.click(function(){})
단축 이벤트 메서드 내부에서는 on() 메서드를 사용하고 있다.
03. 등록한 이벤트 제거
$대상.off("click", 삭제하고 싶은 이벤트 리스너 명)
$대상.off("click") : 특정 이벤트에 걸려있는 모든 이벤트 리스너를 제거하고 싶은 경우 사용
$대상.off() : 모든 이벤트 종류에 상관없이 모든 이벤트를 제거하고 싶은 경우
04. 이벤트 한 번만 실행
$대상.one(이벤트이름, 이벤트리스너)
등록한 이벤트 리스너는 딱 한번 실행되고 자동으로 제거됩니다.
$("#btn").one("click", function(){ alert("환영합니다")
})
05. 기본 행동 취소
event.preventDefault()
기본행동이란? <a href="링크">태그 클릭 시 click 이벤트 발생 후 해당 링크로 이동하는게 기본행동
모든 이벤트가 기본 행동을 취소할 수 있는건 아니다. 이벤트 발생 후 실행되는 기본 행동이 있는지 알려면 발생한 이벤트 객체의 cancelable프로퍼티 값을 확인해야 한다. 이 값이 true일 경우 이벤트 실행 후 기본 행동이 실행 된다는 의미.
id가 test인 a태그 alert 출력 후 링크 이동 되지 않게 만들기
$("#test").one("click", function(e){
alert("환영합니다);
e.preventDefault();
})
정석적인 방법은 아니지만 preventDefault() 메서드 대신 "return false;" 이용하기도 한다.
06. 버블링 멈추기
event.stopPropagation()
이벤트 흐름의 마지막 단계의 흐름으로써 이벤트를 발생한 노드의 조상 노드를 따라 최상위 노드인 document객체까지 흐른다.
모든 이벤트가 버블링이 발생하는 것은 아니다. 이벤트가 버블링이 발생하는지 알려면 발생한 이벤트 객체의 bubbles프로퍼티 값을 확인하면 된다.
이 값이 true이면 이벤트 객체에서 제공하는 버블링멈추기 메소드로 버블링을 멈출 수 있다.
●07. 버블링 활용1 : 하나의 이벤트 리스너로 여러 이벤트 처리하기
$대상.on("이벤트명", "선택자", 이벤트 리스너)
<body>
<ul class="menu">
<li>m</li>
<li>s</li>
<li>e</li>
</ul>
</body>
<script>
$(document).ready(function(){
$("ul.menu li").on("click", function(){
alert($(this).html());
})
});
</script>
위의 on()메서드는 각 li마다 이벤트 리스너가 등록된다.
<script>
$(document).ready(function(e){
$("ul").on("click", function(){
if(e.target.tagName=="L1"){ ... }
})
});
</script>
ul 태그의 하위 노드인 li태그가 클릭 되는 경우 버블링에 의해 ul태그에 등록한 이벤트 리스너가 한번 실행된다.
jquery는 좀더 쉽게 버블링을 활용해 이벤트를 처리할 수 있는 기능을 지원한다.
on()메서드의 두번 째 인자에 이벤트 대상이 되는 선택자를 넣어 메서드를 호출하면 버블링을 활용할 수 있다.
$("ul").on("click", "li", function(e){ .... alert(e.target.tagName); })
●08. 버블링 활용2 : 라이브 이벤트
버블링을 활용하면 아직 만들어져 있지 않은 노드에서 발생하는 이벤트까지 처리 할 수 있다.
jquery1.7 이전 live() 메서드 -> 1.7 이후 on()메서드에 통합
●09. 버블링 발생시키기
$대상.trigger("이벤트 이름");
실제 마우스를 클릭하지 않았지만 클릭한 것처럼 특정 노드에서 수동으로 이벤트를 발생시켜야 하는 경우 사용
<body>
<button id="a">버튼A</button>
<button id="b">버튼B</button>
</body>
<script>
$(document).ready(function(){
$("#a").on("click, function(){
$("#b").trigger("click");
})
$("#b").on("click, function(){
...
})
})
</script>
●10. 사용자 정의 이벤트 만들기
1. var event = jQuery.Event("이벤트이름");
[event.데이터1 = 값;
event.데이터2=값;
....]
$대상.trigger(event);
2. var evnet = jQuery.Event("이벤트이름");
$대상.trigger(event[,데이터1=값, 데이터2=값,,....]);
방법1/ 방법2 모두 처리 순서는 동일
단계 01. 이벤트 객체 생성
단계 02. 이벤트 발생 시 리스너에게 보낼 데이터 생성
단계 03. 이벤트 발생
차이점은 이벤트 발생시 리스너에게 데이터를 보내는 방법이다.
var $newItem = $("<li>new "+count+"</li>");
$menu.append($newItem);
var event = jQuery.Event("addItem");
event.item = $newItem;
event.itemName = $newItem.text();
$menu.trigger(event);
$menu.on("addItem". function(e){
$output.prepend(e.itemName);
})
* 사용자 정의 이벤트 발생
1. 이벤트 객체 생성
2. 이벤트 데이터 생성
3. 이벤트 발생 : trigger()를 이용해 이벤트 발생시켜준다.
* 사용자 정의 이벤트 등록 및 데이터 사용
on()메서드 이용
var event = jQuery.Event("addItem");
var data = [$newItem, $newItem.text(), $menu.children().length]'
$menu.trigger(event, data);
* 사용자 정의 이벤트 발생
1. 이벤트 객체 생성
2. 이벤트 데이터 생성 : 이벤트 리스너로 넘길 데이터를 이벤트 객체 포장하는게 아니라 tirgger()메서드의 매개변수 값으로 넘겨 호출한다
보낼 데이터를 배열로 만든다.
3. 이벤트 발생
* 사용자 정의 이벤트 처리
on()메서드 사용 / trigger()에 담아 보낸 배열 데이터는 이벤트 리스너의 두 번째 매개변수부터 차례대로 담기게 된다.
'개발 > javascript&jquery' 카테고리의 다른 글
| [jQuery] 위치/크기 관련 기능 다루기 (0) | 2020.01.28 |
|---|---|
| [jQuery] mouseover, mouseenter 차이점 (0) | 2020.01.23 |
| [jQuery] 노드 생성, 추가, 삭제, 이동 / 스타일 다루기 / 속성 다루기 (0) | 2020.01.22 |
| [jQuery] jQuery소개 / 노드찾기 (0) | 2020.01.02 |
| [jQuery] Dom&Node 관계 / Dom객체 (0) | 2019.12.31 |