728x90
300x250
캡쳐단계
가장 먼저 실행되는 이벤트 단계, 가장 최상위 노드 부터 시작해서 <html> 태그를 거쳐서 실제 이벤트를 발생시킨 지점의 노드 전까지 흐르게 된다.
이때 이 캡처 단계에 이벤트 리스너가 등록돼 있다면 이벤트 리스너가 실행된다.
eventPhase속성으로 확인했을때 1로 출력 된다면 캡쳐링 단계에 실행된 이벤트 리스너인 것이다.
캡처 단계에 이벤트 등록하기
$대상.get(0).addEventListener(이벤트이름,리스너,true);jQuery에서는 캡처 단계에 이벤트를 등록하는 기능을 제공하지 않기때문에 get()메서드를 이용해서 jQuery 내부에 있는 자바스크립트 DOM에 접근해서 자바스크립트 방식으로 이벤트 리스너를 등록 해야 한다.
addEventListener 마지막 인자값을 true로 해주면 캡처단계에 이벤트가 등록 된다.
https://moo-you.tistory.com/786
[jQuery] eq() 와 get()의 차이
eq(), get() 메서드는 대상 노드의 n번째에 해당하는 노드에 접근한다는 공통점이 있다. 반면 eq(), get()메서드의 차이점은 jQuery 객체로 반환, DOM element로 반환한다는 차이가 있다. eq() $대상.eq(index)
moo-you.tistory.com
캡처 단계 사용 용도
캡처 단계는 주로 타깃/버블링 단계의 이벤트 실행 전에 처리해야할 사전 작업이나 타겟/버블링 단계 이벤트 처리 제어 용도로 가끔 사용 된다. 거의 사용되지 않는다.
document.addEventListener("click",function(e){
console.log("doument phase="+e.eventPhase);
e.stopPropagation(); //캡처링과 버블링 흐름을 막아버리는 메서드
},true);//true 지정하면 캡처단계에서 걸려 있는 위에 이벤트가 실행된다. 즉 더이상 흐르지 않게됨
728x90
반응형
'javaScript' 카테고리의 다른 글
| 버블링(bubbling) 단계 (0) | 2023.02.28 |
|---|---|
| 타겟(Target) 단계 (0) | 2023.02.27 |
| 이벤트 단계 : 캡쳐링, 타겟, 버블링 이벤트 흐름 확인 방법 (0) | 2023.02.25 |
| [javaScript] 이벤트 원리, 종류 (0) | 2023.02.24 |
| DOMContentLoaded와 load의 차이 (0) | 2022.12.24 |
댓글