Javascript事件的捕獲方式和冒泡方式詳解
一、事件處理模型
事件冒泡、捕獲：事件冒泡和事件捕獲分別由微軟和網(wǎng)景公司提出，這兩個(gè)概念都是為了解決頁面中事件流（事件發(fā)生順序）的問題。
<div id="d1">
<div id="d2">
<div id="d3"></div>
</div>
</div>
給出的具有嵌套關(guān)系的三個(gè)div，給三個(gè)元素注冊(cè)相同的事件時(shí)，它們的觸發(fā)順序時(shí)怎樣呢？
1、事件冒泡
微軟提出了名為事件冒泡的事件流。結(jié)構(gòu)上（非視覺上）嵌套關(guān)系的元素，會(huì)存在冒泡的功能，即同一事件，自子元素冒泡向父元素。（自底向上）
針對(duì)上面的例子，如果用冒泡方式，觸發(fā)順序應(yīng)該時(shí)：d3——>d2——>d1，那么我們來驗(yàn)證一下：
（1）給三個(gè)div元素綁定事件
//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、綁定事件
d1.onclick = function(){
console.log(this.id)
}
d2.onclick = function(){
console.log(this.id)
}
d3.onclick = function(){
console.log(this.id)
}
（2）運(yùn)行結(jié)果：
單擊紅色區(qū)域:
單擊紫色區(qū)域：
單擊綠色區(qū)域：?
以上就是事件冒泡啦！?
2、事件捕獲
結(jié)構(gòu)上（非視覺上）嵌套關(guān)系的元素，會(huì)存在事件捕獲的功能，即同一事件，自父元素捕獲至子元素（事件源元素）。（自頂向下）（ie沒有捕獲事件）
針對(duì)上面的例子，如果用冒泡方式，觸發(fā)順序應(yīng)該時(shí)：d1——>d2——>d3，那么我們來驗(yàn)證一下：
（1）給三個(gè)div元素綁定事件
//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、綁定事件
d1.onclick = function(){
console.log(this.id)
}
d2.onclick = function(){
console.log(this.id)
}
d3.onclick = function(){
console.log(this.id)
}
（2）運(yùn)行結(jié)果：
單擊紅色區(qū)域：
?
單擊紫色區(qū)域：
單擊綠色區(qū)域：
事件捕獲get!!!?
注意：
- 觸發(fā)順序 ：先捕獲，后冒泡
focus,blur,change,submit,reset,select等事件不冒泡
二、阻止事件冒泡
（1）w3c標(biāo)準(zhǔn) event.stopPropagation();但ie9以下版本不支持
//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、綁定事件
d1.onclick = function(){
console.log(this.id)
}
d2.onclick = function(){
console.log(this.id)
}
d3.onclick = function(e){
e.stopPropagation();
console.log(this.id)
}
會(huì)發(fā)現(xiàn)單擊綠色區(qū)域時(shí)?，沒有依次觸發(fā)外部的事件，事件冒泡被阻止：
（2）ie獨(dú)有：event.cancelBubble = true;
//1.獲取元素
var d1 = document.querySelector('#d1')
var d2 = document.querySelector('#d2')
var d3 = document.querySelector('#d3')
//2、綁定事件
d1.onclick = function(){
console.log(this.id)
}
d2.onclick = function(){
console.log(this.id)
}
d3.onclick = function(e){
e.cancelBubble = true;
console.log(this.id)
}
結(jié)果同（1）。
（3）合并取消：return false
在javascript的return false只會(huì)阻止默認(rèn)行為，而是用jQuery的話則既阻止默認(rèn)行為又防止對(duì)象冒泡。
總結(jié)
本篇文章就到這里了，希望能夠給你帶來幫助，也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
javascript 支持ie和firefox杰奇翻頁函數(shù)
杰奇小說系統(tǒng)用到的翻頁函數(shù)，支持firefox，官方自帶的模板不支持，這樣大家就可以用firefox瀏覽網(wǎng)頁了，在網(wǎng)頁木馬橫行的今天，firefox比ie要安全不少2008-07-07
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)易ATM功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家分享了KnockoutJs快速入門教程，了解KnockoutJs到底是什么？如何使用KnockoutJS中的data-bind語法來將模型數(shù)據(jù)綁定到DOM元素中，感興趣的小伙伴們可以參考一下2016-05-05
JavaScript html5利用FileReader實(shí)現(xiàn)上傳功能
這篇文章主要為大家詳細(xì)介紹了JavaScript html5利用FileReader實(shí)現(xiàn)上傳功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
本文主要介紹了原生js實(shí)現(xiàn)吸頂效果的示例。具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
javascript制作的簡(jiǎn)單注冊(cè)模塊表單驗(yàn)證
通常在我們的HTML頁面表單中有大量的數(shù)據(jù)驗(yàn)證工作， 免不了要寫很多驗(yàn)證表單的js代碼，這是一項(xiàng)非常繁瑣枯燥的工作。很多程序員也會(huì)經(jīng)常遺漏這項(xiàng)工作。所以寫了這一 段JavaScript代碼提供給大家使用。使用起來很簡(jiǎn)單，大家拿回去自由擴(kuò)展吧2015-04-04
相信好多小伙伴在使用getUserInfo獲取小程序用戶昵稱和頭像時(shí)卻獲取不到,下面這篇文章主要給大家介紹了關(guān)于微信小程序登錄獲取不到頭像和昵稱的詳細(xì)解決辦法,需要的朋友可以參考下2022-12-12
document.getElementByName方法沒有document.getElementsByName得到的是標(biāo)簽的數(shù)組，下面為大家詳細(xì)介紹下具體的使用，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
關(guān)于js中window.location.href,location.href,parent.location.href
關(guān)于js中window.location.href,location.href,parent.location.href,top.location.href的用法2010-10-10
JavaScript之RegExp_動(dòng)力節(jié)點(diǎn)Java學(xué)院整理
正則表達(dá)式是一種用來匹配字符串的強(qiáng)有力的武器。它的設(shè)計(jì)思想是用一種描述性的語言來給字符串定義一個(gè)規(guī)則，凡是符合規(guī)則的字符串，我們就認(rèn)為它“匹配”了，否則，該字符串就是不合法的2017-06-06