Javascript의 이벤트 캡처, 이벤트 버블링 및 이벤트 위임 메커니즘

개념

이벤트 버블링: 이벤트에 의해 트리거된 가장 깊은 요소가 이벤트를 먼저 수신합니다. 그런 다음 문서 객체가 최종적으로 이벤트를 수신할 때까지 해당 부모 요소 등이 계속됩니다. 문서에는 html 요소에 비해 독립적인 시각적 표현이 없지만 여전히 html 요소의 상위 요소이며 이벤트가 문서 요소까지 버블링될 수 있습니다.
이벤트 캡쳐에 대해 가볍게 이야기해보겠습니다.
이벤트 캡처: 이벤트는 먼저 DOM 트리의 최상위 개체(문서)에서 발생한 다음 가장 깊은 요소로 전파됩니다. (IE6에는 캡처가 아닌 버블링만 있다는 점 참고하세요)
이벤트 위임: 이벤트 위임은 버블링 원리를 사용하여 이벤트 모니터링을 상위 요소로 변환하는 것, 즉 이벤트를 상위 요소에 바인딩한 다음 하위 요소를 가져오는 것 같아요. 이벤트의 요소 개체를 찾아 해당 작업을 수행합니다. 장점: 1. 성능향상 2. 코드량 감소

예제

이벤트 버블링 예 1

기본적으로 버블링 단계에서 이벤트가 실행됩니다
우선해 보세요 다음 코드에서 :

<script type="text/javascript">
    window.onload=function(){
        var oId1=document.getElementById(&#39;id1&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);        
        var oId3=document.getElementById(&#39;id3&#39;); 

        oId1.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id1");
        });

        oId2.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id2");

        });

        oId3.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id3");
        });
    }</script><style type="text/css">
    *{margin: 0;padding: 0;}</style>
    <p id="box" style="background-color:#669;widht:600px; height:400px;">
    <p id="id1" style="background-color:#F00;widht:500px;height:300px;">
    <p id="id2" style="background-color:#6F9;widht:400px; height:200px;">
        <p id="id3" style="background-color:#000;widht:300px; height:100px;">
        </p>
    </p></p></p>

id1, id2, id3을 차례로 클릭했는데 실행 효과는 다음과 같습니다.

분석: id3을 클릭하면 버블링이 1부터 시작되기 때문입니다. id3이 먼저 바인딩되고 id3에 대한 바인딩이 수행되어 id2에 이벤트 버블이 발생하고 id2 위의 이벤트가 실행되고 마지막으로 id1 위의 이벤트가 실행됩니다.

이벤트 버블링 인스턴스 2

이제 id2의 버블링 방지를 시작하고 JS를 다음과 같이 수정합니다

window.onload=function(){
        var oId1=document.getElementById('id1');        
        var oId2=document.getElementById('id2');        
        var oId3=document.getElementById('id3'); 

        oId1.addEventListener('click',function(e){
            console.log("点击了id1");
        });

        oId2.addEventListener('click',function(e){
            console.log("点击了id2");
            e.stopPropagation();

        });

        oId3.addEventListener('click',function(e){
            console.log("点击了id3");
        });
    }

</script>

이때 에서 id1, id2, id3을 클릭합니다. 시퀀스 실행 효과는 다음과 같습니다. 그림:

id2에 이벤트가 실행되고 더 이상 버블링이 발생하지 않기 때문에 id2 또는 id3을 클릭하면 id1에 바인딩된 이벤트가 실행되지 않습니다.

이벤트 캡처 예시 1

캡처 단계에서 이벤트가 실행되는지 확인하기 위해 JS 코드를 다음과 같이 변경했습니다.

<script type="text/javascript">
    window.onload=function(){
        var oId1=document.getElementById(&#39;id1&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);        
        var oId3=document.getElementById(&#39;id3&#39;); 

        oId1.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id1");
        },true);

        oId2.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id2");

        },true);

        oId3.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id3");
        },true);
    }</script>

이때, id1, id2, id3 순으로 클릭했는데 실행 효과는 아래와 같습니다.

분석: 클릭할 때마다 루트 요소부터 이벤트가 실행됩니다. 이벤트가 있으면 실행됩니다.

이벤트 캡처 예시 2

이때 JS 코드를 다음과 같이 변경했습니다.

<script type="text/javascript">
    window.onload=function(){
        var oId1=document.getElementById(&#39;id1&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);        
        var oId3=document.getElementById(&#39;id3&#39;); 

        oId1.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id1");
        },true);

        oId2.addEventListener(&#39;click&#39;,function(e){
            e.stopPropagation();
            console.log("点击了id2");

        },true);

        oId3.addEventListener(&#39;click&#39;,function(e){

            console.log("点击了id3");
        },true);
    }</script>

이때 에서 id1, id2, id3을 클릭했습니다.

id3을 클릭했더니 id1과 id2에 바인딩된 이벤트가 실행되는 현상을 발견했습니다. ? 버블링 e.stopPropagation()을 취소하면 이벤트 캡처도 방지되는 것으로 나타났습니다.

이벤트 버블링 및 캡처 예시

이제 JS를 다음과 같이 수정합니다.

<script type="text/javascript">
    window.onload=function(){
        var oId1=document.getElementById(&#39;id1&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);        
        var oId3=document.getElementById(&#39;id3&#39;); 


        oId1.onclick=function(){  //该事件在冒泡阶段执行
            console.log("点击了id1");
        }

        oId2.addEventListener(&#39;click&#39;,function(e){
            console.log("点击了id2");

        },true);

        oId3.addEventListener(&#39;click&#39;,function(e){

            console.log("点击了id3");
        },true);
    }</script>

이때 id1, id2, id3을 차례로 클릭하면 실행 효과는 다음과 같습니다.

이벤트 대리자 인스턴스 1

다음 코드는 클릭 이벤트를 상자에 바인딩하면 어떤 요소가 클릭되었는지 알 수 있습니다. e.srcElement.

<script type="text/javascript">
    window.onload=function(){
        var oBox=document.getElementById(&#39;box&#39;);
        oBox.onclick=function(e){
            var curObj=e.srcElement;
            console.log(curObj.id);
        }
    }</script><style type="text/css">
    *{margin: 0;padding: 0;}</style>
    <p id="box" style="background-color:#669;widht:600px; height:400px;">
    <p id="id1" style="background-color:#F00;widht:500px;height:300px;">
    <p id="id2" style="background-color:#6F9;widht:400px; height:200px;">
        <p id="id3" style="background-color:#000;widht:300px; height:100px;">
        </p>
    </p></p></p>

박스 바인딩 클릭 이벤트에서 클릭한 요소를 얻을 수 있음을 알 수 있습니다.

이벤트 델리게이트 인스턴스 2

이벤트 델리게이트가 버블링되는지 확인
위의 JS를 다음과 같이 변경합니다.

<script type="text/javascript">
    window.onload=function(){
        var oBox=document.getElementById(&#39;box&#39;);        
        var oId2=document.getElementById(&#39;id2&#39;);

        oId2.onclick=function(e){
            e.stopPropagation();
        }
        oBox.onclick=function(e){
            var curObj=e.srcElement;
            console.log(curObj.id);
        }
    }</script>

이때 클릭하면 다음을 찾을 수 있습니다. id2, id3 은 e.srcElement를 통해 얻을 수 없습니다. id2의 버블링을 막았으니까요.

위 내용은 Javascript에서의 이벤트 캡처, 이벤트 버블링, 이벤트 위임 메커니즘에 대한 내용이며, 더 많은 관련 내용은 PHP 중국어 홈페이지(www.php)를 참고하시기 바랍니다. .cn)!