深入理解事件冒泡(Bubble)和事件捕捉(capture)

更新時(shí)間：2016年05月28日 11:28:21 投稿：jingxian

下面小編就為大家?guī)硪黄钊肜斫馐录芭?Bubble)和事件捕捉(capture)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

事件的發(fā)生順序

假設(shè)在一個(gè)元素中又嵌套了另一個(gè)元素并且兩者都有一個(gè)onClick事件處理函數(shù)(event handler)。如果用戶單擊元素2，則元素1和元素2的單擊事件都會(huì)被觸發(fā)。但是哪一個(gè)事件先被觸發(fā)？哪一個(gè)事件處理函數(shù)會(huì)被首先執(zhí)行？換句話說，事件的發(fā)生順序到底如何？如下圖是當(dāng)點(diǎn)擊span元素區(qū)域是，三個(gè)點(diǎn)擊事件都會(huì)被觸發(fā)，但是先后順序是怎樣的呢？

<div onclick="func1">
   <p onclick="func2">
     <span onclick=""func3>
     </span>
   </p>
 </div>

兩種模型

對(duì)于這個(gè)事件的處理順序上，Netscape和微軟有兩種截然不同的處理方法：

•Netscape主張事件會(huì)從最外層開始發(fā)生，直到最具體的元素，這種事件發(fā)生順序被稱為捕獲型

•微軟則保持事件從最內(nèi)部元素開始發(fā)生，然后一直向上傳播，這種事件順序被稱為冒泡型

這兩種事件順序是截然相反的。Explorer瀏覽器只支持冒泡事件，Mozilla，Opera7和Konqueror兩者都支持。而更古老的opera和iCab兩者都不支持

w3c

任何發(fā)生在w3c事件模型中的事件，首是進(jìn)入捕獲階段，直到達(dá)到目標(biāo)元素，再進(jìn)入冒泡階段。

對(duì)于正常的web開發(fā)，可以選擇是在捕獲階段還是冒泡階段綁定事件處理函數(shù)，這是通過addEventListener()方法實(shí)現(xiàn)的，如果這個(gè)函數(shù)的useCapture參數(shù)是true，則在捕獲階段綁定函數(shù)，反之false，在冒泡階段綁定函數(shù)。

element.addEventListener(event, function, useCapture)

阻止冒泡

在正常的開發(fā)過程中，如果想要阻止事件的傳播，通過一個(gè)方法實(shí)現(xiàn)。

在微軟的模型中，你必須設(shè)置事件的cancelBubble的屬性為true

window.event.cancelBubble = true

在w3c模型中你必須調(diào)用事件的stopPropagation()方法

e.stopPropagation()

通過調(diào)用這些方法會(huì)阻止所有冒泡向外傳播?？鐬g覽器解決方案：

function doSomething(e) {
  if (!e) {
    var e = window.event;
    e.cancelBubble = true;
  }
  if (e.stopPropagation) {
    e.stopPropagation();
  }
}

以上這篇深入理解事件冒泡(Bubble)和事件捕捉(capture)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JS模擬自動(dòng)點(diǎn)擊的簡(jiǎn)單實(shí)例
這篇文章介紹了JS模擬自動(dòng)點(diǎn)擊的簡(jiǎn)單實(shí)例，有需要的朋友可以參考一下
2013-08-08
H5用戶注冊(cè)表單頁(yè) 注冊(cè)模態(tài)框!
這篇文章主要為大家詳細(xì)介紹了H5用戶注冊(cè)表單頁(yè)的相關(guān)代碼，注冊(cè)模態(tài)框，如何設(shè)計(jì)用戶注冊(cè)表單頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
一文詳解JavaScript數(shù)組對(duì)象和字符串對(duì)象
這篇文章主要介紹了JavaScript數(shù)組對(duì)象和字符串對(duì)象，文章中有詳細(xì)的代碼示例，對(duì)學(xué)習(xí)或工作有一定的幫助，需要的小伙伴可以參考一下
2023-04-04
JS設(shè)置緩存和緩存過期時(shí)間的操作方法
js-cookie是一個(gè)用于處理瀏覽器Cookie的JavaScript庫(kù),本文通過實(shí)例代碼講解JS設(shè)置緩存和緩存過期時(shí)間的操作方法,感興趣的朋友跟隨小編一起看看吧
2025-01-01
JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)點(diǎn)擊文字切換登錄窗口的方法,涉及javascript操作div層及相關(guān)樣式的技巧,需要的朋友可以參考下
2015-05-05
JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法示例
這篇文章主要介紹了JS獲取多維數(shù)組中相同鍵的值實(shí)現(xiàn)方法,結(jié)合實(shí)例形式分析了JS數(shù)組遍歷、判斷、鍵值獲取等操作技巧,需要的朋友可以參考下
2017-01-01
重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn)
這篇文章主要介紹了重置Redux的狀態(tài)數(shù)據(jù)的方法實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-11-11
js實(shí)現(xiàn)的二級(jí)橫向菜單條實(shí)例
這篇文章主要介紹了js實(shí)現(xiàn)的二級(jí)橫向菜單條,是非常美觀簡(jiǎn)潔的二級(jí)導(dǎo)航條效果,可實(shí)現(xiàn)針對(duì)鼠標(biāo)事件的動(dòng)態(tài)響應(yīng)及頁(yè)面樣式切換功能,簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08
Position屬性之relative用法
Relative是position的一個(gè)屬性，是相對(duì)定位，通過本篇文章給大家介紹Position屬性之relative用法，對(duì)position屬性relative相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2015-12-12
javascript設(shè)計(jì)模式 – 迭代器模式原理與用法實(shí)例分析
這篇文章主要介紹了javascript設(shè)計(jì)模式 – 迭代器模式原理與用法,結(jié)合實(shí)例形式分析了javascript迭代器模式相關(guān)概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下
2020-04-04