자바스크립트 이벤트 버블링 캡처 및 이벤트 전파 방지 샘플 코드에 대한 자세한 설명

1. 이벤트 버블링이란?

정렬 알고리즘에서 버블 정렬 방법을 배웠습니다. 이벤트 버블링의 경우에도 마찬가지입니다.

이벤트가 무엇인지 예를 살펴보겠습니다. .

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

이벤트 버블링이 지원되는 경우 "테스트" 버튼을 클릭하면 가장 먼저 실행되는 것은 경고("버튼")입니다. 이름의 의미는 다음과 같습니다.

이벤트는 가장 구체적인 이벤트에서 정렬됩니다. target to 최소 특정 이벤트 대상(문서 개체)이 순차적으로 트리거됩니다.

p, 버튼, html 루트 요소에 모두 이벤트가 있는 경우 이벤트 실행 순서는

button->p->html

2입니다.

이벤트 캡처를 다시 살펴보겠습니다. 이벤트 캡처와 비교하면 처리 시간 순서는 이벤트 버블링과 완전히 반대입니다. 마찬가지로:

<p>
 <button>测试</button>
</p>
<script>
 $("p").bind("click",function(){alert("p")});
 $("button").bind("click",function(){alert("button"});
</script>

이 코드가 실행되면 경고("p")가 트리거됩니다. 첫 번째로 경고("p")가 두 번째로 실행됩니다("버튼"). 이벤트 캡처의 개념을 명확히 합니다.

이벤트는 가장 정확하지 않은 개체(문서 개체)부터 시작하여 가장 정확한 개체까지 트리거됩니다.

마찬가지로 버튼, p, html 요소에 바인딩된 이벤트가 있는 경우 이벤트 실행 순서는 다음과 같습니다.

html->p->button

3. 다양한 버전의 브라우저에서 이벤트 처리. 기구?

(1) DOM에서는 이벤트 버블링과 이벤트 캡처를 모두 지원합니다. W3C 표준에서는 모든 이벤트가 이벤트 캡처에서 시작되어 최종 노드를 찾은 다음 루트 노드까지 버블링되는 것으로 간주됩니다.

DOM에서 이벤트 바인딩을 지원하는 함수는 다음과 같습니다.

addEventListener("事件名"，函数，userCapture);

userCapture 매개변수의 경우 기본값은 false이고 이벤트 버블링이 지원됩니다.
userCapture 매개변수가 true이면 이벤트 캡처가 지원됩니다.

(2) 많은 브라우저에서 addEventListener 메소드가 지원되지만 IE는 이를 지원하지 않습니다!

(3) IE의 이벤트 처리 메커니즘은 IE

attachEvent 메서드에 고유한 이벤트 바인딩 메서드가 있습니다.

attachEvent("事件名"，"函数名")

4. 방지 방법 사건 확산?

이벤트 버블링과 이벤트 캡처 모두 차단될 수 있습니다.

(1) 먼저 W3C에서 이벤트 전파를 방지하는 방법은 stopPropagation()입니다. IE에서는

cancelBubble=true;

(2) 이벤트의 기본 동작을 방지하는 방법은 무엇입니까? W3C 표준에서는 IE에서

window.event.returnValue = false;

를 설정하여 PreventDefault 메소드를 사용하십시오.

위 내용은 자바스크립트 이벤트 버블링 캡처 및 이벤트 전파 방지 샘플 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!