js之事件冒泡和事件捕獲詳細(xì)介紹

(1)冒泡型事件:事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對(duì)象)的順序觸發(fā)屈扎。

(2)捕獲型事件(event capturing):事件從最不精確的對(duì)象(document 對(duì)象)開(kāi)始觸發(fā),然后到最精確(也可以在窗口級(jí)別捕獲事件亡容,須由開(kāi)發(fā)人員特別指定)祠够。

(3)DOM事件流:同時(shí)支持兩種事件模型:捕獲型事件和冒泡型事件,但是露泊,捕獲型事件先發(fā)生脆淹。

兩種事件流會(huì)觸及DOM中的所有對(duì)象巾钉,從document對(duì)象開(kāi)始,也在document對(duì)象結(jié)束坯约。?

?DOM事件模型最獨(dú)特的性質(zhì)是熊咽,文本節(jié)點(diǎn)也觸發(fā)事件(在IE中不會(huì))。

支持W3C標(biāo)準(zhǔn)的瀏覽器在添加事件時(shí)用addEventListener(event,fn,useCapture)方法闹丐,基中第3個(gè)參數(shù)useCapture是一個(gè)Boolean值横殴,用來(lái)設(shè)置事件是在事件捕獲時(shí)執(zhí)行,還是事件冒泡時(shí)執(zhí)行卿拴。

而不兼容W3C的瀏覽器(IE)用attachEvent()方法衫仑,此方法沒(méi)有相關(guān)設(shè)置梨与,不過(guò)IE的事件模型默認(rèn)是在事件冒泡時(shí)執(zhí)行的,也就是在useCapture等于false的時(shí)候執(zhí)行惑畴,所以把在處理事件時(shí)把useCapture設(shè)置為false是比較安全蛋欣,也實(shí)現(xiàn)兼容瀏覽器的效果。

事件捕獲階段:事件從最上一級(jí)標(biāo)簽開(kāi)始往下查找如贷,直到捕獲到事件目標(biāo)(target)陷虎。事件冒泡階段:事件從事件目標(biāo)(target)開(kāi)始,往上冒泡直到頁(yè)面的最上一級(jí)標(biāo)簽杠袱。

假設(shè)一個(gè)元素div尚猿,它有一個(gè)下級(jí)元素p。

<div>

<p>元素</p>

</div>

這兩個(gè)元素都綁定了click事件楣富,如果用戶點(diǎn)擊了p凿掂,它在div和p上都觸發(fā)了click事件,那這兩個(gè)事件處理程序哪個(gè)先執(zhí)行呢纹蝴?事件順序是什么庄萎? 兩種模型以前,Netscape和Microsoft是不同的實(shí)現(xiàn)方式塘安。Netscape中糠涛,div先觸發(fā),這就叫做事件捕獲兼犯。Microsoft中忍捡,p先觸發(fā),這就叫做事件冒泡切黔。

IE只支持事件冒泡砸脊,Mozilla, Opera 7 和 Konqueror兩種都支持,舊版本的Opera's 和 iCab兩種都不支持?

事件捕獲當(dāng)你使用事件捕獲時(shí)纬霞,父級(jí)元素先觸發(fā)凌埂,子級(jí)元素后觸發(fā),即div先觸發(fā)诗芜,p后觸發(fā)侨舆。

事件冒泡當(dāng)你使用事件冒泡時(shí),子級(jí)元素先觸發(fā)绢陌,父級(jí)元素后觸發(fā),即p先觸發(fā)熔恢,div后觸發(fā)脐湾。

W3C模型

W3C模型是將兩者進(jìn)行中和,在W3C模型中叙淌,任何事件發(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=冒泡傳統(tǒng)綁定事件方式在一個(gè)支持W3C DOM的瀏覽器中荧恍,像這樣一般的綁定事件方式,是采用的事件冒泡方式屯吊。

ele.onclick = doSomething2IE瀏覽器如上面所說(shuō)送巡,IE只支持事件冒泡,不支持事件捕獲盒卸,它也不支持addEventListener函數(shù)骗爆,不會(huì)用第三個(gè)參數(shù)來(lái)表示是冒泡還是捕獲,它提供了另一個(gè)函數(shù)attachEvent世落。ele.attachEvent("onclick", doSomething2);

附:事件冒泡(的過(guò)程):事件從發(fā)生的目標(biāo)(event.srcElement||event.target)開(kāi)始淮腾,沿著文檔逐層向上冒泡,到document為止屉佳。

事件的傳播是可以阻止的:? 在W3c中谷朝,使用stopPropagation()方法??

在IE下設(shè)置cancelBubble = true;??

在捕獲的過(guò)程中stopPropagation()武花;后圆凰,后面的冒泡過(guò)程也不會(huì)發(fā)生了~

在W3c中,使用preventDefault()方法体箕;

在IE下設(shè)置window.event.returnValue = false;

不是所有的事件都能冒泡专钉,例如:blur、focus累铅、load跃须、unload

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市娃兽,隨后出現(xiàn)的幾起案子菇民,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,204評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件第练,死亡現(xiàn)場(chǎng)離奇詭異阔馋,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)娇掏,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,091評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門(mén)呕寝,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人婴梧,你說(shuō)我怎么就攤上這事下梢。” “怎么了志秃?”我有些...
    開(kāi)封第一講書(shū)人閱讀 164,548評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵怔球,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我浮还,道長(zhǎng)竟坛,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 58,657評(píng)論 1 293
  • 正文 為了忘掉前任钧舌,我火速辦了婚禮担汤,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘洼冻。我一直安慰自己崭歧,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,689評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布撞牢。 她就那樣靜靜地躺著率碾,像睡著了一般。 火紅的嫁衣襯著肌膚如雪屋彪。 梳的紋絲不亂的頭發(fā)上所宰,一...
    開(kāi)封第一講書(shū)人閱讀 51,554評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音畜挥,去河邊找鬼仔粥。 笑死,一個(gè)胖子當(dāng)著我的面吹牛蟹但,可吹牛的內(nèi)容都是我干的躯泰。 我是一名探鬼主播,決...
    沈念sama閱讀 40,302評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼华糖,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼麦向!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起客叉,我...
    開(kāi)封第一講書(shū)人閱讀 39,216評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤磕蛇,失蹤者是張志新(化名)和其女友劉穎景描,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體秀撇,經(jīng)...
    沈念sama閱讀 45,661評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,851評(píng)論 3 336
  • 正文 我和宋清朗相戀三年向族,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了呵燕。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,977評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡件相,死狀恐怖再扭,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情夜矗,我是刑警寧澤泛范,帶...
    沈念sama閱讀 35,697評(píng)論 5 347
  • 正文 年R本政府宣布,位于F島的核電站紊撕,受9級(jí)特大地震影響罢荡,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜对扶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,306評(píng)論 3 330
  • 文/蒙蒙 一区赵、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧浪南,春花似錦笼才、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 31,898評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至絮记,卻和暖如春摔踱,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背到千。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,019評(píng)論 1 270
  • 我被黑心中介騙來(lái)泰國(guó)打工昌渤, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人憔四。 一個(gè)月前我還...
    沈念sama閱讀 48,138評(píng)論 3 370
  • 正文 我出身青樓膀息,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親了赵。 傳聞我的和親對(duì)象是個(gè)殘疾皇子潜支,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,927評(píng)論 2 355

推薦閱讀更多精彩內(nèi)容

  • 背景知識(shí) 什么是事件?直觀的說(shuō)就是網(wǎng)頁(yè)上發(fā)生的事情柿汛,大部分是指用戶的鼠標(biāo)動(dòng)作和鍵盤(pán)動(dòng)作冗酿,如點(diǎn)擊埠对、移動(dòng)鼠標(biāo)、按下某個(gè)...
    吧啦啦小湯圓閱讀 1,846評(píng)論 2 15
  • 一裁替、冒泡型事件 事件按照從最精確的對(duì)象到最不精確的對(duì)象的順序觸發(fā)项玛。不同瀏覽器的順序有所不同。IE 5.5: div...
    你期待的花開(kāi)閱讀 865評(píng)論 1 11
  • 以下文章為轉(zhuǎn)載弱判,對(duì)理解JavaScript中的事件處理機(jī)制很有幫助襟沮,淺顯易懂,特分享于此昌腰。 什么是事件开伏? 事件(E...
    jxyjxy閱讀 3,037評(píng)論 1 10
  • 聲明:本文來(lái)源于http://www.webzsky.com/?p=731我只是在這里作為自己的學(xué)習(xí)筆記整理一下(...
    angryyan閱讀 7,012評(píng)論 1 6
  • 你的眼眸,透露著你的世界 那么清澈遭商,那么明亮 在這萬(wàn)紫千紅中 我找到了你 不會(huì)放手固灵,不會(huì)拋棄 愿我之心,照耀黑暗 ...
    昆侖有淚閱讀 282評(píng)論 0 1