快捷導(dǎo)航

JavaScript中事件冒泡機(jī)制示例詳析

更新時(shí)間：2021年06月08日 11:18:28 作者：來(lái)世做春風(fēng)

這篇文章主要給大家介紹了關(guān)于JavaScript中事件冒泡機(jī)制的相關(guān)資料,文中詳析介紹了什么是冒泡、冒泡捕獲需要以及冒泡和捕獲的具體區(qū)別,需要的的朋友可以參考下

什么是冒泡？

DOM事件流（event flow ）存在三個(gè)階段：事件捕獲階段、處于目標(biāo)階段、事件冒泡階段。

事件捕獲（event capturing）：通俗的理解就是，當(dāng)鼠標(biāo)點(diǎn)擊或者觸發(fā)dom事件時(shí)，瀏覽器會(huì)從根節(jié)點(diǎn)開(kāi)始由外到內(nèi)進(jìn)行事件傳播，即點(diǎn)擊了子元素，如果父元素通過(guò)事件捕獲方式注冊(cè)了對(duì)應(yīng)的事件的話，會(huì)先觸發(fā)父元素綁定的事件。

事件冒泡（dubbed bubbling）：與事件捕獲恰恰相反，事件冒泡順序是由內(nèi)到外進(jìn)行事件傳播，直到根節(jié)點(diǎn)。

dom標(biāo)準(zhǔn)事件流的觸發(fā)的先后順序?yàn)椋合炔东@再冒泡，即當(dāng)觸發(fā)dom事件時(shí)，會(huì)先進(jìn)行事件捕獲，捕獲到事件源之后通過(guò)事件傳播進(jìn)行事件冒泡。不同的瀏覽器對(duì)此有著不同的實(shí)現(xiàn)，IE10及以下不支持捕獲型事件，所以就少了一個(gè)事件捕獲階段，IE11、Chrome 、Firefox、Safari等瀏覽器則同時(shí)存在。

addEventListener()方法

這個(gè)方法設(shè)定一個(gè)事件監(jiān)聽(tīng)器，當(dāng)某一事件發(fā)生通過(guò)設(shè)定的參數(shù)執(zhí)行操作。語(yǔ)法是：

addEventListener(event, function, useCapture)

參數(shù) event 是必須的，表示監(jiān)聽(tīng)的事件，例如 click, touchstart 等，就是之前不加前綴 on 的事件。

參數(shù) function 也是必須的，表示事件觸發(fā)后調(diào)用的函數(shù)，可以是外部定義函數(shù)，也可以是匿名函數(shù)。

參數(shù) useCapture 是選填的，填true或者false，用于描述事件是冒泡還是捕獲，true表示捕獲，默認(rèn)的false表示冒泡。

移除事件監(jiān)聽(tīng)

如果要移除 addEventListener() 添加的事件監(jiān)聽(tīng)，就要使用removeEventListener()，語(yǔ)法是：

removeEventListener(event, function)

參數(shù)與addEventListener()一致。

兼容性

IE 8及更早的版本，和Opera 7.0及更早的版本，不支持 addEventListener() 和 removeEventListener() 方法，他們使用的是一下方法代替：

添加事件：

attachEvent(event, function)

移除事件：

**detachEvent(event, function) **

可以用以下方法解決兼容性問(wèn)題：

if (div1.addEventListener) {
         div1.addEventListener('click', function () {
             console.log("支持")
         });
} else if (div1.attachEvent) {
         div1.attachEvent('onclick', function () {
             console.log("不支持")
         });
}

冒泡和捕獲的具體區(qū)別

HTML

    <div id="div1">
         <div id="div2"></div>
    </div>

JS

<script>
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.addEventListener('click',function(){
            console.log("div1--捕獲階段")
        },true);
        div2.addEventListener('click',function(){
            console.log("div2--捕獲階段")
        },true);
        div1.addEventListener('click',function(){
            console.log("div1--冒泡階段")
        });
        div2.addEventListener('click',function(){
            console.log("div2--冒泡階段")
        });
</script>

輸出結(jié)果（點(diǎn)擊div2的時(shí)候執(zhí)行的結(jié)果）

解決辦法

function stopBubble(e) {
         if (e && e.stopPropagation) {
                e.stopPropagation(); //因此它支持W3C的stopPropagation()方法 
         } else {
             window.event.cancelBubble = true; //否則，我們需要使用IE的方式來(lái)取消事件冒泡 
         }
}