728x90 300x250 SMALL javaScript545 캡처(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. [javaScript] 이벤트 원리, 종류 이벤트 작동 원리 단계1 : 마크업 태그에서 마우스를 클릭하거나 키보드 키 입력 //클릭 이벤트 리스너가 연결되어 있음 단계2 : MouseEvent 객체 생성 웹브라우저는 마우스와 관련된 여러 정보가 들어있는 MouseEvent의 객체를 생성한다. (이벤트 리스너 실행) MouseEvent 객체 - 클릭한 마우스 버튼 정보 - 클릭과 함께 누른 키보드 정보 - 단계1 에서 클릭한 마우스 위치 정보 단계3 : 이벤트 리스너 실행 이벤트가 발생하면 연결한 이벤트 리스너가 실행된다. (MouseEvent 객체가 이벤트 리스너 실행) function(event){ event.이벤트 정보 } 이벤트 종류 마우스 이벤트 : 사용자가 마우스 버튼을 클릭했을 때 발생하는 이벤트. 이때 이벤트 객체에는 클릭한 마우스 .. 2023. 2. 24. 오토플레이 적용하기 - 비공개 보호되어 있는 글 입니다. 2023. 2. 22. 이전 1 ··· 47 48 49 50 51 52 53 ··· 137 다음 728x90 반응형 LIST