1. 이벤트 흐름
HTML 요소가 이벤트를 유발하는 순서.
2. Event Bubble IE의 이벤트 스트림을 이벤트 버블이라고합니다. 즉, 이벤트는 가장 구체적인 요소 (문서에서 가장 깊은 중첩 레벨이있는 노드)로 시작한 다음 덜 특정 노드 (문서)로 단계별로 전파 함을 의미합니다. 3. 이벤트 캡처 이벤트 캡처 아이디어는 덜 구체적인 노드가 이벤트를 더 일찍 수신 해야하는 반면, 가장 구체적인 노드는 마지막에 노드를 받아야한다는 것입니다. 이벤트 캡처의 목적은 사전 결정된 대상에 도달하기 전에 이벤트를 캡처하는 것입니다.
DOM 이벤트 스트림
"DOM2 레벨 이벤트 흐름"에 지정된 이벤트 흐름에는 이벤트 캡처 스테이지, 대상 단계 및 버블 스테이지의 세 단계가 포함됩니다. 가장 먼저 발생하는 일은 이벤트 캡처이며 이벤트를 가로 채는 기회를 제공합니다. 그런 다음 실제 목표는 이벤트를받습니다. 마지막 단계는 이벤트에 응답 할 수있는 버블 단계입니다. 예를 들어 간단한 HTML 페이지를 가져 가면 <div> 요소를 클릭하면 아래 표시된 순서대로 이벤트가 트리거됩니다.
DOM 이벤트 스트림에서 실제 대상 (<div> 요소)은 캡처 단계 동안 이벤트를받지 않습니다. 이것은 캡처 단계에서 이벤트가 문서 다음에 <html>으로 멈춘 다음 <body>로 중지된다는 것을 의미합니다. 다음 단계는 "표적화 된"단계이므로 이벤트는 <div>에서 발생하며 이벤트 처리에서 기포 단계의 일부로 간주됩니다. 그런 다음 기포 단계가 발생하고 이벤트는 문서로 전파됩니다.
DOM 이벤트 스트리밍을 지원하는 대부분의 브라우저는 특정 동작을 구현합니다. "DOM2 레벨 이벤트"사양에 따라 캡처 스테이지에는 이벤트의 대상이 포함되지 않아야하지만 Safari, Chrome, Firefox 및 Opera9.5 이상은 캡처 스테이지에서 이벤트 객체에서 이벤트를 트리거합니다. 결과적으로 대상 객체에서 이벤트를 운영 할 수있는 두 가지 기회가 있습니다.
거품에서 이벤트를 중지하십시오
실험
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> </title> <script type = "text/javascript"> 함수 onbtn () {alert ( 'button'); // cancelBubble (); 이벤트 버블 방지} // 이벤트 객체 함수 가져 오기 getEvent () {// iE 또는 chromeif (window.event) {return Window.event;} // for firefoxfunc = getEvent.caller; // 함수 발신자 while (func! = null) {var arg0 = func.arguments [0]; // 발신자의 첫 번째 매개 변수를 가져옵니다. // 매개 변수가 비어있는 경우 (arg0) {// arg0이 이벤트 객체인지 판단합니다 ((arg0.constructor == event || arg0.constructor == mouseevent || arg0.constructor == keyboardevent) || (Arg0) == "대상"&& arg0.preventDefault ". arg0.stoppropagation)) {return arg0; }} // func get func caller func = func.caller;} return null;} // 블록 event bubbles cancelBubble () {event = getEvent (); // firefox chrome if (event.preventDefault) {event.preventDefault (); event.stopPropagation (); } else {// event.cancelBubble = true; event.returnvalue = false; }} </script> </head> <body onclick = "alert ( 'body')"> <div onclick = "alert ( 'div');"; Style = "Back위의 HTML 코드는 이벤트 트리거 순서로 실행됩니다.
기본값 : '버튼'이 팝업됩니다 ---》 팝업 'div'----》 팝업 '바디'가 나타납니다.
cancelBubble () 코드를 추가하면 '버튼'만 팝업됩니다.
위의 기사는 JS DOM 이벤트 메커니즘을 깊이 이해하고 있습니다. 내가 당신과 공유 한 모든 콘텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.