#Javascript# 事件的傳播機(jī)制

Maxiye 發(fā)布于2019-08-26 18:27 / 1533人閱讀

摘要：當(dāng)前元素的某個(gè)事件行為被觸發(fā)，它所有的祖先元素，相關(guān)的事件行為也會(huì)被依次觸發(fā)，順序是從內(nèi)向外。如果祖先元素的這個(gè)行為綁定了方法，綁定的方法也會(huì)被觸發(fā)執(zhí)行，我們把事件的這種傳播機(jī)制叫做冒泡傳播這個(gè)傳播機(jī)制是所有瀏覽器的傳播機(jī)制。


    

document.body.onclick = function(){
console.log("body");
}
outer.onclick = function(){
console.log("outer");
}

inner.onclick = function(){
console.log("inner");// inner  outer  body
}

事件傳播有三個(gè)階段（捕獲--目標(biāo)--冒泡）
Event.prototype
0: none 默認(rèn)值，不代表任何的意思
1：capturing_phase:捕獲階段
2：at_target:目標(biāo)階段（當(dāng)前事件源）
3：bubbling_phase:冒泡階段

三個(gè)階段處理的事情
點(diǎn)擊inner，觸發(fā)了inner的click事件
瀏覽器在執(zhí)行inner的click綁定的方法之前
1.從整個(gè)頁面document開始向內(nèi)查找，把inner的祖先元素遍歷一遍（為冒泡階段的傳播途徑做準(zhǔn)備）
2.接下來找到目標(biāo)階段找到當(dāng)前事件源。把事件源上綁定的方法執(zhí)行（沒綁定方法就不執(zhí)行了）
3.不僅觸發(fā)了當(dāng)前事件源的點(diǎn)擊行為，而且瀏覽器會(huì)按照第一個(gè)階段規(guī)劃的傳播路徑，從內(nèi)向外（inner -> outer->body->html->document）把祖先元素的click行為依次觸發(fā)。

當(dāng)前元素的某個(gè)事件行為被觸發(fā)，它所有的祖先元素，相關(guān)的事件行為也會(huì)被依次觸發(fā)，順序是從內(nèi)向外。如果祖先元素的這個(gè)行為綁定了方法，綁定的方法也會(huì)被觸發(fā)執(zhí)行，我們把事件的這種傳播機(jī)制叫做冒泡傳播

這個(gè)傳播機(jī)制是所有瀏覽器的傳播機(jī)制。

GPU云服務(wù)器云服務(wù)器阻止事件傳播 javascript的事件事件機(jī)制事件冒泡機(jī)制

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/110219.html

相關(guān)文章

JavaScript中幾個(gè)重要的知識(shí)點(diǎn)（2） ---- DOM事件

摘要：使用來移除事件，參數(shù)必須與要移除的事件處理函數(shù)地址指針相同。在低版本瀏覽器中，綁定級(jí)事件的方法為中的級(jí)事件的事件處理程序都是在冒泡階段執(zhí)行的。 JavaScript中幾個(gè)最重要的大知識(shí)點(diǎn) 面向?qū)ο?DOM事件異步交互ajax 事件事件就是文檔和瀏覽器的瞬間交互行為 1.事件類型點(diǎn)擊: click 滾輪: scroll 滑動(dòng): move 進(jìn)入: enter 加載: load ...

dantezhao 2019-08-20 17:33 評(píng)論0 收藏0
淺談React事件機(jī)制

摘要：事件簡(jiǎn)介事件是合成事件，所有事件都自動(dòng)綁定到最外層上。支持事件的冒泡機(jī)制，我們可以使用和來中斷它。這樣做簡(jiǎn)化了事件處理和回收機(jī)制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個(gè)子集。 React事件簡(jiǎn)介 React事件是合成事件，所有事件都自動(dòng)綁定到最外層上。因?yàn)閂irtual DOM 在內(nèi)存中是以對(duì)象的形式存在的，所以React 基于 Virtual DOM 實(shí)現(xiàn)了...

moven_j 2019-08-02 15:29 評(píng)論0 收藏0
淺談React事件機(jī)制

摘要：事件簡(jiǎn)介事件是合成事件，所有事件都自動(dòng)綁定到最外層上。支持事件的冒泡機(jī)制，我們可以使用和來中斷它。這樣做簡(jiǎn)化了事件處理和回收機(jī)制，效率也有很大提升。事件類型合成事件的事件類型是原生事件類型的一個(gè)子集。 React事件簡(jiǎn)介 React事件是合成事件，所有事件都自動(dòng)綁定到最外層上。因?yàn)閂irtual DOM 在內(nèi)存中是以對(duì)象的形式存在的，所以React 基于 Virtual DOM 實(shí)現(xiàn)了...

MyFaith 2019-08-23 18:36 評(píng)論0 收藏0
瀏覽器事件模型中捕獲階段、目標(biāo)階段、冒泡階段實(shí)例詳解

摘要：目標(biāo)階段真正點(diǎn)擊的元素的事件發(fā)生了兩次，因?yàn)樵谏厦娴拇a中，既在捕獲階段綁定了事件，又在冒泡階段綁定了事件，所以發(fā)生了兩次。所以很明顯用直接綁定的事件發(fā)生在了冒泡階段。如果對(duì)事件大概了解，可能知道有事件冒泡這回事，但是冒泡、捕獲、傳播這些機(jī)制可能還沒有深入的研究實(shí)踐一下，我抽時(shí)間整理了一下相關(guān)的知識(shí)。本文主要對(duì)事件機(jī)制一些細(xì)節(jié)進(jìn)行討論，過于基礎(chǔ)的事件綁定知識(shí)方法沒有介紹。特別少...

mylxsw 2019-08-21 10:38 評(píng)論0 收藏0
關(guān)于javascript事件機(jī)制的理解及事件監(jiān)聽的封裝

摘要：說到事件機(jī)制首先要說一下事件模型原始事件模型在原始事件模型中，事件是不會(huì)傳播，只是觸發(fā)立即執(zhí)行，函數(shù)會(huì)作為元素的屬性被監(jiān)聽。標(biāo)準(zhǔn)函數(shù)綁定其中是否綁定在捕獲階段，表示采取捕獲方式，表示采取冒泡方式。說到事件機(jī)制首先要說一下事件模型 1.原始事件模型在原始事件模型中，事件是不會(huì)傳播，只是觸發(fā)立即執(zhí)行，函數(shù)會(huì)作為元素的屬性被監(jiān)聽。這種方式和這種方式document.querySe...

lykops 2019-08-20 16:54 評(píng)論0 收藏0