728x90 300x250 캡처단계2 캡처(Capture) 단계 캡쳐단계 가장 먼저 실행되는 이벤트 단계, 가장 최상위 노드 부터 시작해서 태그를 거쳐서 실제 이벤트를 발생시킨 지점의 노드 전까지 흐르게 된다. 이때 이 캡처 단계에 이벤트 리스너가 등록돼 있다면 이벤트 리스너가 실행된다. eventPhase속성으로 확인했을때 1로 출력 된다면 캡쳐링 단계에 실행된 이벤트 리스너인 것이다. 캡처 단계에 이벤트 등록하기 $대상.get(0).addEventListener(이벤트이름,리스너,true); jQuery에서는 캡처 단계에 이벤트를 등록하는 기능을 제공하지 않기때문에 get()메서드를 이용해서 jQuery 내부에 있는 자바스크립트 DOM에 접근해서 자바스크립트 방식으로 이벤트 리스너를 등록 해야 한다. addEventListener 마지막 인자값을 true로 해주면.. 2023. 2. 26. 이벤트 단계 : 캡쳐링, 타겟, 버블링 이벤트 흐름 확인 방법 자바스크립트 이벤트 단계 이벤트는 크게 3단계에 걸쳐서 발생한다. 단계1 : 캡처 단계 단계2 : 타겟 단계 단계3 : 버블링 단계 아래와 같은 돔 구주에서 두번째 tr 첫번째 td 지점을 클릭 할경우 아래의 이미지는 캡쳐링과 타겟 버블링이 발생하는 과정을 보여준다. 제일 위에 window 최상위 DOM부터 시작해서 흐름에 따라 클릭한 타겟 지점 바로 위 까지 캡처 단계이다. 클릭한 지점에서 타겟 단계, 타겟지점 이후 부터 다시 최상위 DOM까지 흘러가는 버블링 단계를 거치게 된다. - 이벤트 흐르은 오직 DOM노드 객체를 따라 이동한다. - 사용자가 만든 객체에서는 이벤트가 흐르게 할 수 없다. 이벤트 흐름 단계 확인하는 방법 eventPhase 프로퍼티를 사용하여 이벤트 단계를 알 수있다. docum.. 2023. 2. 25. 이전 1 다음 728x90 반응형