JavaScript 事件傳播

widuu 發(fā)布于2019-08-23 12:14 / 969人閱讀

摘要：當(dāng)一個(gè)事件觸發(fā)了之后，它會(huì)在父子元素之間進(jìn)行傳播?？刂婆_(tái)輸出信息從上述的例子中，我們可以看到捕獲階段和冒泡階段事件傳播的方向

當(dāng)一個(gè)事件觸發(fā)了之后，它會(huì)在父、子元素之間進(jìn)行傳播。
一、事件傳播的三個(gè)階段
捕獲階段：從window對(duì)象一直傳播到目標(biāo)節(jié)點(diǎn)
目標(biāo)階段：在目標(biāo)節(jié)點(diǎn)上觸發(fā)事件
冒泡階段：從目標(biāo)階段冒泡回window對(duì)象

JavaScript中的事件流是指事件觸發(fā)的順序，事件傳播有兩種方式，分別是事件冒泡和事件捕獲。

二、在HTML元素節(jié)點(diǎn)上添加事件監(jiān)聽(tīng)函數(shù)
用addEventListener給節(jié)點(diǎn)添加監(jiān)聽(tīng)函數(shù)，代碼如下。


      點(diǎn)擊觸發(fā)事件

當(dāng)參數(shù)設(shè)為false時(shí)，表示只在冒泡階段監(jiān)聽(tīng)，所以當(dāng)事件從p標(biāo)簽向上冒泡到div標(biāo)簽時(shí)，會(huì)在兩個(gè)節(jié)點(diǎn)上分別觸發(fā)一次click事件?？刂婆_(tái)輸出信息：

當(dāng)參數(shù)設(shè)為true時(shí)，表示在捕獲階段監(jiān)聽(tīng)?？刂婆_(tái)輸出信息：

從上述的例子中，我們可以看到捕獲階段和冒泡階段事件傳播的方向

GPU云服務(wù)器云服務(wù)器阻止事件傳播 javascript事件 javascript鍵盤事件 javascript焦點(diǎn)事件

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

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

相關(guān)文章

JavaScript-淺談DOM事件流

摘要：事件流指的是從頁(yè)面接收事件的順序。級(jí)事件規(guī)定方法的第三個(gè)參數(shù)設(shè)為，表示事件在捕獲階段觸發(fā)。目前支持事件捕獲流的瀏覽器有，，，，。事件流根據(jù)級(jí)事件規(guī)定，事件流應(yīng)該包括三個(gè)階段，事件捕獲階段，處于目標(biāo)階段和事件冒泡階段。什么是事件？（敲黑板）事件，就是文檔或?yàn)g覽器窗口發(fā)生的一些特定的交互瞬間。（by 《JavaScript高級(jí)程序設(shè)計(jì)》）比如鼠標(biāo)點(diǎn)擊，雙擊，滾動(dòng)條滑動(dòng)... 什么是事件...

haitiancoder 2019-08-20 10:49 評(píng)論0 收藏0
#Javascript# 事件的傳播機(jī)制

摘要：當(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 = ...

Maxiye 2019-08-26 18:27 評(píng)論0 收藏0
你不知道的javascript事件

摘要：然而和分別提出了完全相反的的概念事件冒泡和事件捕獲。所有的節(jié)點(diǎn)中包含了這兩個(gè)方法，它們都接受個(gè)參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個(gè)布爾值。事件流級(jí)事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段事件冒泡階段。事件流描述的是從頁(yè)面中接受事件的順序。然而ie和netscape分別提出了完全相反的的概念：事件冒泡和事件捕獲。下面就說(shuō)說(shuō)這兩種事件流：事件冒泡事件冒泡，就是說(shuō)...

imtianx 2019-08-21 17:40 評(píng)論0 收藏0
你不知道的javascript事件

摘要：然而和分別提出了完全相反的的概念事件冒泡和事件捕獲。所有的節(jié)點(diǎn)中包含了這兩個(gè)方法，它們都接受個(gè)參數(shù)要處理的事件名作為事件處理程序的函數(shù)和一個(gè)布爾值。事件流級(jí)事件規(guī)定的事件流包括三個(gè)階段事件捕獲階段處于目標(biāo)階段事件冒泡階段。事件流描述的是從頁(yè)面中接受事件的順序。然而ie和netscape分別提出了完全相反的的概念：事件冒泡和事件捕獲。下面就說(shuō)說(shuō)這兩種事件流：事件冒泡事件冒泡，就是說(shuō)...

marek 2019-08-01 18:00 評(píng)論0 收藏0
JavaScript捕獲和冒泡探討

摘要：上個(gè)星期在微博中一個(gè)關(guān)于捕獲和冒泡代碼的討論，可能沒(méi)有動(dòng)手實(shí)現(xiàn)一篇的人無(wú)法給出確定的答案。目標(biāo)階段事件對(duì)象到達(dá)其事件目標(biāo)。在此階段注冊(cè)的事件監(jiān)聽(tīng)器會(huì)對(duì)相應(yīng)的冒泡事件進(jìn)行處理。上個(gè)星期在微博中一個(gè)關(guān)于javascript捕獲和冒泡代碼的討論，可能沒(méi)有動(dòng)手實(shí)現(xiàn)一篇的人無(wú)法給出確定的答案。這里再來(lái)回顧一下之前的三條微博。事件的執(zhí)行順序 JavaScript冒泡和捕獲考察題目看圖回答問(wèn)題...

caikeal 2019-08-19 18:09 評(píng)論0 收藏0