[JavaScript] 완전히 반대되는 두 가지 이벤트 흐름: 이벤트 버블링과 이벤트 캡처-JS 튜토리얼-php.cn

[JavaScript] 완전히 반대되는 두 가지 이벤트 흐름: 이벤트 버블링과 이벤트 캡처

php是最好的语言

풀어 주다： 2018-08-02 09:13:26

원래의

2098명이 탐색했습니다.

이벤트란 무엇인가요?

이벤트는 문서 및 브라우저 창 내에서 발생하는 특정 상호 작용 순간입니다.

이벤트 흐름이란:

이벤트 흐름은 페이지에서 이벤트가 수신되는 순서를 설명하지만 흥미롭게도 Microsoft(IE)와 Netscape(넷스케이프) 개발팀은 실제로 완전히 반대되는 두 가지 이벤트를 제안했습니다. 스트림 개념, IE의 이벤트 스트림은 이벤트 버블링 스트림(이벤트 버블링)인 반면, Netscape의 이벤트 스트림은 이벤트 캡처링 스트림(이벤트 캡처)입니다.

첫 번째 유형: 이벤트 버블링

IE에서 제안하는 이벤트 흐름을 이벤트 버블링이라고 합니다. 즉, 이벤트는 처음에 가장 구체적인 요소에 의해 수신된 다음 단계적으로 덜 구체적인 노드로 위쪽으로 전파됩니다. step

p——>body——>html——>document

두 번째 유형: 이벤트 캡처

특정 노드가 이벤트를 먼저 수신하고, 가장 특정 노드가 이벤트를 마지막에 수신해야 합니다. 이벤트. 캡처의 목적은 이벤트가 의도한 목적지에 도달하기 전에 이벤트를 캡처하는 것입니다.

document——>html——>body——>p

DOM 이벤트 흐름

"DOM2 수준 이벤트"에서 지정하는 이벤트 흐름에는 이벤트 캡처 단계, 대상 단계, 이벤트의 세 단계가 포함됩니다. 버블링 단계

DOM 이벤트 흐름에서 실제 대상은 캡처 단계에서 이벤트를 수신하지 않습니다. 즉, 캡처 단계에서는 이벤트가 몸체에 도달한 후 중지됩니다. 다음 단계는 대상 단계에 있으므로 이벤트는 p에서 발생하며 이벤트 처리에서 버블링 단계의 일부로 간주됩니다. 그런 다음 버블링 단계가 발생하고 이벤트가 문서로 다시 전파됩니다.

"DOM2 수준 이벤트" 사양에서는 캡처 단계에 이벤트 대상이 포함되지 않을 것을 분명히 요구하지만 현재 주류 브라우저는 캡처 단계 중에 이벤트 객체에 대한 이벤트를 트리거합니다. 결과적으로 대상 개체에 대한 이벤트를 조작할 수 있는 기회가 두 번 있습니다.

DOM 레벨 2 이벤트 핸들러

DOM 레벨 2 이벤트는 두 가지 메소드를 정의합니다: 추가 이벤트 및 삭제 이벤트 처리를 위한 작업:

Add 이벤트 addEventListener() 이벤트 제거 RemoveEventListener()

모든 DOM 노드는 다음 두 가지를 포함합니다. (1) 처리할 이벤트 메소드(예: click, mouseover, dbclick...) (2) 이벤트 처리 함수는 익명 함수이거나 명명된 함수일 수 있습니다. 함수(그러나 이벤트를 삭제해야 하는 경우 명명된 함수여야 함) (3) 이벤트 버블링 단계인지 이벤트 캡처 단계인지 나타내는 부울 값(true: 캡처에서 이벤트 핸들러를 호출하는 것을 의미) stage; false : 버블링 단계에서 이벤트 핸들러가 호출됨을 나타냅니다.

//这是一个DOM 2级事件 添加事件最简单的方式（此时添加的是一个匿名函数）
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button>按钮</button>
    <script>
        var btn=document.querySelector(&#39;button&#39;);
        btn.addEventListener(&#39;click&#39;,function(){
            console.log(&#39;我是按钮&#39;)
        },false)   //当第三个参数不写时，也是默认为false（冒泡时添加事件）
    </script>

</body>
</html>

로그인 후 복사

//添加的函数是命名函数，removeEventListener需要用这种方式
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

    <button>按钮</button>
    <script>
        var btn=document.querySelector(&#39;button&#39;);
        btn.addEventListener(&#39;click&#39;,foo,false);
        function foo(){
            console.log(&#39;我是按钮&#39;)
        }
           //其实操作就是把写在里面的函数拿到了外面，而在原来的位置用函数名来代替
    </script>
</body>
</html>

로그인 후 복사

DOM2 레벨 핸들러는 두 개의 이벤트 핸들링 이벤트 추가도 지원합니다. 그러면 두 이벤트가 모두 실행됩니다.

대부분의 경우 이벤트 핸들러를

에 추가합니다. 다양한 브라우저와의 호환성을 극대화할 수 있는 이벤트 스트림의 버블링 단계입니다.

이벤트가 대상에 도달하기 전에

이벤트를 가로채야 하는 경우에만 캡처 단계에 이벤트 핸들러를 추가하는 것이 가장 좋습니다.

특별히 필요하지 않은 경우 이벤트 캡처 단계에서 이벤트 핸들러를 등록하지 않는 것이 좋습니다.

이벤트 버블링 방지

는 주로 이벤트 전파를 방지하는 데 사용됩니다. 다른 DOM 노드로 전달되는 것을 방지하고 이벤트 전파의 모든 단계에서 사용할 수 있습니다. 사용 방법은 다음과 같습니다(IE 호환):

function stopBubble(event){
	if(window.event){
        //兼容IE
		window.event.cancelBubble=true;
	}else{
		event.stopPropagation();
	}
}

로그인 후 복사

기본 이벤트 차단

function stopDefaultEvent(event){
	if(window.event){
        //兼容IE
		window.event.returnValue=false;
	}else{
		event.preventDefault()
	}
	return false;
}

로그인 후 복사