什么是冒泡？

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

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

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

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

addEventListener()方法

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

addEventListener(event, function, useCapture)

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

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

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

移除事件監(jiān)聽

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

removeEventListener(event, function)

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

兼容性

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

添加事件：

attachEvent(event, function)

移除事件：

**detachEvent(event, function) **

可以用以下方法解決兼容性問題：

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é)果（點擊div2的時候執(zhí)行的結(jié)果）

解決辦法

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

總結(jié)

到此這篇關(guān)于JavaScript中事件冒泡機(jī)制的文章就介紹到這了,更多相關(guān)JavaScript事件冒泡內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論