사건의 순서
다른 요소가 하나의 요소에 중첩되어 있으며 둘 다 온 클릭 이벤트 핸들러가 있다고 가정합니다. 사용자가 요소 2를 클릭하면 요소 1 및 요소 2의 클릭 이벤트가 트리거됩니다. 그러나 어떤 이벤트가 먼저 트리거됩니까? 어떤 이벤트 핸들러 기능이 먼저 실행됩니까? 다시 말해, 이벤트가 발생하는 순서는 무엇입니까? 아래 그림에서 볼 수 있듯이 SPAN 요소 영역을 클릭하면 3 개의 클릭 이벤트가 트리거되지만 순서는 무엇입니까?
<div onclick = "func1"> <p onclick = "func2"> <span onclick = ""func3> </span> </p> </div>
두 가지 모델
Netscape와 Microsoft는이 이벤트를 처리하는 두 가지 완전히 다른 방법을 가지고 있습니다.
• Netscape는 이벤트가 가장 외부 층에서 가장 구체적인 요소까지 발생한다고 옹호 하며이 이벤트 시퀀스를 캡처 유형이라고합니다.
• Microsoft는 이벤트를 가장 안쪽 요소에서 유지 한 다음 위쪽으로 퍼집니다. 이 이벤트 시퀀스를 버블 타입이라고합니다
이 두 사건의 순서는 완전히 반대입니다. Explorer 브라우저는 Mozilla, Opera7 및 Konqueror와 같은 버블 이벤트 만 지원합니다. 오래된 오페라와 ICAB는도 지원하지 않습니다
W3C
W3C 이벤트 모델에서 발생하는 모든 이벤트는 먼저 대상 요소에 도달 할 때까지 캡처 스테이지에 들어간 다음 버블 스테이지에 들어갑니다.
정상적인 웹 개발의 경우 캡처 스테이지 또는 버블 스테이지에서 이벤트 핸들러 기능을 바인딩할지 여부를 선택할 수 있습니다. 이것은 addeventListener () 메소드를 통해 달성됩니다. 이 함수의 usecapture 매개 변수가 true 인 경우 함수가 캡처 스테이지에 바인딩되고 그 반대도 마찬가지입니다. 함수는 기포 단계에 바인딩됩니다.
element.addeventListener (이벤트, 함수, usecapture)
거품을 멈 춥니 다
정상적인 개발 중에 사건의 확산을 방지하려면 하나의 방법을 통해 수행 할 수 있습니다.
Microsoft의 모델에서는 이벤트의 취소 버블 속성을 True로 설정해야합니다.
Window.event.cancelBubble = true
W3C 모델에서는 이벤트의 stoppropagation () 메소드를 호출해야합니다.
E.StopPropagation ()
이러한 방법을 호출하면 모든 거품이 바깥쪽으로 퍼지는 것을 방지 할 수 있습니다. 크로스 브라우저 솔루션 :
함수 dosomething (e) {if (! e) {var e = window.event; e.cancelbubble = true; } if (e.StopPropagation) {e.StopPropagation (); }}위의 기사 이벤트 버블 및 이벤트 캡처에 대한 심층적 인 이해는 내가 공유 한 모든 콘텐츠입니다. 나는 그것이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.