Javascript中事件捕獲、事件冒泡以及事件委托機制

概念

事件冒泡：事件促發的最深層元素首先接收事件。然後是它的父元素，依次向上，直到document對象最終接收到事件。盡管相對于html元素來說，document沒有獨立的視覺表現，他仍然是html元素的父元素并且事件能冒泡到document元素。

随便也說一下事件捕獲。

事件捕獲：事件首先發生在DOM樹的最高層對象(document)然後往最深層的元素傳播。（注意IE6隻有冒泡，沒有捕獲）

事件委托：我認為事件委托是利用冒泡原理，把事件的監聽轉換到其父元素上，也就是把事件綁定到父元素上，然後在事件中擷取子元素對象，對其進行相應的操作。優點：1.提高性能2.減少代碼量

執行個體

事件冒泡執行個體1

事件預設是在冒泡階段執行

首先看下面代碼：

<script type="text/javascript">
    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");

        });

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

</script>
<style type="text/css">
    *{margin: ;padding: ;}
</style>
<div id="box" style="background-color:#669;widht:600px; height:400px;">
<div id="id1" style="background-color:#F00;widht:500px;height:300px;">
    <div id="id2" style="background-color:#6F9;widht:400px; height:200px;">
        <div id="id3" style="background-color:#000;widht:300px; height:100px;"></div>
    </div>
</div>
</div>
           

我依次點選id1、id2、id3，執行效果如下圖：

解析：因為點選id3時候，先從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('id1');
        var oId2=document.getElementById('id2');
        var oId3=document.getElementById('id3'); 

        oId1.addEventListener('click',function(e){
            console.log("點選了id1");
        },true);

        oId2.addEventListener('click',function(e){
            console.log("點選了id2");

        },true);

        oId3.addEventListener('click',function(e){
            console.log("點選了id3");
        },true);
    }

</script>
           

此時，我依次點選id1、id2、id3，執行效果如下圖：

解析：每次點選，事件都會從根元素開始開始執行，即捕獲到，如果有事件，就執行。

事件捕獲執行個體2

此時，我将JS代碼改為如下：

<script type="text/javascript">
    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");
        },true);

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

        },true);

        oId3.addEventListener('click',function(e){

            console.log("點選了id3");
        },true);
    }

</script>
           

此時，我依次點選id1、id2、id3，執行效果如下圖：

從中發現了，一個現象，我點選id3的時候，發現執行了id1和id2上面綁定的事件，為什麼不執行id3上面的事件呢？原來是因為取消冒泡e.stopPropagation();，也阻止了事件的捕獲。

事件冒泡與捕獲執行個體

現在我将JS修改為如下：

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


        oId1.onclick=function(){  //該事件在冒泡階段執行
            console.log("點選了id1");
        }

        oId2.addEventListener('click',function(e){
            console.log("點選了id2");

        },true);

        oId3.addEventListener('click',function(e){

            console.log("點選了id3");
        },true);
    }

</script>
           

此時，我依次點選id1、id2、id3，執行效果如下圖：

事件委托執行個體1

下面代碼，當我在box綁定click事件的時候，通過e.srcElement，可以擷取點選的是哪個元素。

<script type="text/javascript">
    window.onload=function(){
        var oBox=document.getElementById('box');
        oBox.onclick=function(e){
            var curObj=e.srcElement;
            console.log(curObj.id);
        }
    }

</script>
<style type="text/css">
    *{margin: ;padding: ;}
</style>
<div id="box" style="background-color:#669;widht:600px; height:400px;">
<div id="id1" style="background-color:#F00;widht:500px;height:300px;">
    <div id="id2" style="background-color:#6F9;widht:400px; height:200px;">
        <div id="id3" style="background-color:#000;widht:300px; height:100px;"></div>
    </div>
</div>
</div>
           

可以看出，我們在box綁定click事件裡面能擷取點選的元素。

事件委托執行個體2

驗證事件委托中冒泡

将上面的JS改為如下：

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

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

</script>
           

此時點選，會發現，id2，id3的時候，沒法通過e.srcElement擷取到。因為我阻止了id2的冒泡。