腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

帶你徹底搞懂JavaScript的事件流

更新時(shí)間：2022年03月07日 15:57:33 作者：故里有長安丶丶

這篇文章主要為大家詳細(xì)介紹了JavaScript的事件流，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來幫助

DOM事件流

要明白事件流，首先我們要明白三點(diǎn)：

元素不是獨(dú)立的，是串聯(lián)在一起的
單個(gè)元素觸發(fā)事件以后還會影響其他元素
事件流的方式：事件捕獲(網(wǎng)景提出)、事件冒泡(IE提出)

在這里插入圖片描述

我們就以上圖為例，假設(shè)你給div綁定了點(diǎn)擊事件，當(dāng)你點(diǎn)擊了div后，其他元素也會受之牽連，會引起牽一發(fā)而動(dòng)全身的效果。

事件流的方式有兩種：事件冒泡、事件捕獲

事件冒泡

在這里插入圖片描述

事件冒泡階段：在點(diǎn)擊完div后立即觸發(fā)目標(biāo)事件，然后再一層一層向上冒泡

事件捕獲

在這里插入圖片描述

事件捕獲階段：在點(diǎn)擊完div后不會立即觸發(fā)div的事件，而是一層一層向下捕獲，最終到達(dá)div才觸發(fā)事件。

其實(shí)，這兩種階段，在日后的項(xiàng)目開發(fā)中都有可能遇見，因?yàn)椴煌慕壎ㄊ录椒ǎ炀土瞬煌氖录A段(冒泡/捕獲)

情景一：直接在HTML中綁定事件

<body onclick="console.log('我是body')">
    <button onclick="console.log('我是button')">
        <span onclick="console.log('我是span')">快樂按鈕</span>
    </button>
</body>

效果：

請?zhí)砑訄D片描述

從上圖可看出，當(dāng)我們點(diǎn)擊span標(biāo)簽以后，上層button身上的事件以及body身上的事件都會按冒泡順序執(zhí)行

情景二：[domNode].onclick()方式 —— DOM0級

html:

<body>
    <button>
        <span>快樂按鈕</span>
    </button>
</body>

javascript:

var body = document.getElementsByTagName('body')[0];
var button = document.getElementsByTagName('button')[0];
var span = document.getElementsByTagName('span')[0];
body.onclick = function() {console.log('我是body')};
button.onclick = function() {console.log('我是button')};
span.onclick = function() {console.log('我是span')};

效果：

請?zhí)砑訄D片描述

我們發(fā)現(xiàn)，DOM0級綁定事件的方式依然是冒泡的形式

情景三：[domNode].addEventListener()方式 —— DOM2級

addEvenListener(事件名，事件觸發(fā)后的回調(diào)，布爾值)

false(默認(rèn))：表示在冒泡階段調(diào)用事件處理程序true：表示在捕獲階段調(diào)用事件處理程序

html:

<body>
    <button>
        <span>快樂按鈕</span>
    </button>
</body>

javascript:

var body = document.getElementsByTagName('body')[0];
var button = document.getElementsByTagName('button')[0];
var span = document.getElementsByTagName('span')[0];
function theName() {console.log('我是' + this.nodeName)};
body.addEventListener('click',theName,false);
button.addEventListener('click',theName,false);
span.addEventListener('click',theName,false);

效果：

請?zhí)砑訄D片描述

我們可以看到當(dāng)addEventListener的第三個(gè)參數(shù)為false(不寫默認(rèn)也是false)的時(shí)候，事件流為冒泡。

當(dāng)我們把第三個(gè)參數(shù)改為true時(shí)：

......
body.addEventListener('click',theName,true);
button.addEventListener('click',theName,true);
span.addEventListener('click',theName,true);

請?zhí)砑訄D片描述

我們發(fā)現(xiàn)，執(zhí)行順序?yàn)閎ody ——> button ——> span，為事件捕獲階段。

DOM2級規(guī)定：

事件流包括三個(gè)階段(1.捕獲階段 2.目標(biāo)階段 3.冒泡階段)
執(zhí)行循序應(yīng)遵循：捕獲階段 ——> 目標(biāo)階段 ——> 冒泡階段

也就是說當(dāng)你點(diǎn)擊目標(biāo)元素后，不會立刻執(zhí)行觸發(fā)事件，而是先執(zhí)行事件捕獲階段 ——> 然后處于目標(biāo)階段(觸發(fā)事件) ——> 事件冒泡階段

我們來看一道經(jīng)典面試題：當(dāng)我們點(diǎn)擊baby嬰兒時(shí)的輸出順序？

在這里插入圖片描述

html：

<body>
    <div class="grandma">grandma奶奶
        <div class="mother">mother媽媽
            <div class="daughter">daughter
                <div class="baby">baby嬰兒</div>
            </div>
        </div>
    </div>
</body>

javascript：

var grandma = document.getElementsByClassName('grandma')[0]
var mother = document.getElementsByClassName('mother')[0]
var daughter = document.getElementsByClassName('daughter')[0]
var baby = document.getElementsByClassName('baby')[0]
function theName() {
    console.log('我是' + this.className);
}
baby.addEventListener('click', theName, false)//冒泡
daughter.addEventListener('click', theName, true)//捕獲
mother.addEventListener('click', theName, true)//捕獲
grandma.onclick = theName//冒泡

結(jié)果：

在這里插入圖片描述