Javascript中事件擷取、事件冒泡以及事件委託機制

概念

事件冒泡：事件促發的最深層元素首先接收事件。然後是它的父元素，依序向上，直到document物件最終接收到事件。儘管相對於html元素來說，document沒有獨立的視覺表現，他仍然是html元素的父元素並且事件能冒泡到document元素。
隨便也說一下事件捕捉。
事件擷取：事件首先發生在DOM樹的最高層物件(document)然後往最深層的元素傳播。 （注意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時候，先從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上面綁定的事件，為什麼不執行id3上面的事件呢？原來是因為取消冒泡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

下面程式碼，當我在box綁定click事件的時候，透過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>

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

事件委託實例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）！