JS中事件冒泡和事件捕獲介紹
談起JavaScript的 事件,事件冒泡、事件捕獲、阻止默認(rèn)事件這三個(gè)話題,無(wú)論是面試還是在平時(shí)的工作中,都很難避免。
事件捕獲階段:事件從最上一級(jí)標(biāo)簽開(kāi)始往下查找,直到捕獲到事件目標(biāo)(target)。
事件冒泡階段:事件從事件目標(biāo)(target)開(kāi)始,往上冒泡直到頁(yè)面的最上一級(jí)標(biāo)簽。
1、冒泡事件:
事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)。通俗來(lái)講就是,就是當(dāng)設(shè)定了多個(gè)div的嵌套時(shí);即建立了父子關(guān)系,當(dāng)父div與子div共同加入了onclick事件時(shí),當(dāng)觸發(fā)了子div的onclick事件后,子div進(jìn)行相應(yīng)的js操作,但是父div的onclick事件同樣會(huì)被觸發(fā)。
html:
<div> <input type="button" value="測(cè)試事件冒泡" /> </div>
js:
var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("body")[0]; $input.onclick = function(e){ this.style.border = "5px solid red" var e = e || window.e; alert("red") } $div.onclick = function(e){ this.style.border = "5px solid green" alert("green") } $body.onclick = function(e){ this.style.border = "5px solid yellow" alert("yellow") }
效果:依次彈出”red“,"green","yellow"。這就是事件冒泡:觸發(fā)button這個(gè)元素,卻連同父元素綁定的事件一同觸發(fā)。
2、阻止事件冒泡
如果對(duì)input的事件綁定改為:
$input.onclick = function(e){ this.style.border = "5px solid red" var e = e || window.e; alert("red") e.stopPropagation(); }
這個(gè)時(shí)候只會(huì)彈出”red“,因?yàn)樽柚沽耸录芭荨?br />
3、事件捕獲:
從頂層元素到目標(biāo)元素或者從目標(biāo)元素到頂層元素,和事件冒泡是一個(gè)相反的過(guò)程。事件從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā),然后到最精確(也可以在窗口級(jí)別捕獲事件,不過(guò)必須由開(kāi)發(fā)人員特別指定)。
$input.addEventListener("click", function(){ this.style.border = "5px solid red"; alert("red") }, true) $div.addEventListener("click", function(){ this.style.border = "5px solid green"; alert("green") }, true) $body.addEventListener("click", function(){ this.style.border = "5px solid yellow"; alert("yellow") }, true)
這個(gè)時(shí)候依次彈出”yellow“,"green","red"。這就是事件的捕獲。
如果把a(bǔ)ddEventListener方法的第三個(gè)參數(shù)改成false,則表示只在冒泡的階段觸發(fā),彈出的依次為:”red“,"green","yellow"。這是因?yàn)樵赪3C模型中,任何事件發(fā)生時(shí),先從頂層開(kāi)始進(jìn)行事件捕獲,直到事件觸發(fā)到達(dá)了事件源元素。然后,再?gòu)氖录赐线M(jìn)行事件冒泡,直到到達(dá)document。
程序員可以自己選擇綁定事件時(shí)采用事件捕獲還是事件冒泡,方法就是綁定事件時(shí)通過(guò)addEventListener函數(shù),它有三個(gè)參數(shù),第三個(gè)參數(shù)若是true,則表示采用事件捕獲,若是false,則表示采用事件冒泡。
ele.addEventListener('click',doSomething2,true)
true=捕獲
false=冒泡
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧
這篇文章主要介紹了淺談Vue3.0之前你必須知道的TypeScript實(shí)戰(zhàn)技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09JS小功能(offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果)實(shí)例代碼
這篇文章主要介紹了offsetLeft實(shí)現(xiàn)圖片滾動(dòng)效果實(shí)例代碼,有需要的朋友可以參考一下2013-11-11JavaScript之移動(dòng)端H5生成圖片解決方案講解
這篇文章主要介紹了JavaScript之移動(dòng)端H5生成圖片解決方案講解,本篇文章通過(guò)簡(jiǎn)要的案例,講解了該項(xiàng)技術(shù)的了解與使用,以下就是詳細(xì)內(nèi)容,需要的朋友可以參考下2021-08-08javascript簡(jiǎn)單實(shí)現(xiàn)命名空間效果
這篇文章主要介紹了javascript簡(jiǎn)單的實(shí)現(xiàn)命名空間效果的方法。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03150行代碼帶你實(shí)現(xiàn)微信小程序中的數(shù)據(jù)偵聽(tīng)
在這篇文章中, 我將用150行代碼, 手把手帶你打造一個(gè)小程序也可以使用的偵聽(tīng)器,感興趣的朋友跟隨小編一起看看吧2019-05-05