事件冒泡及捕捉

IE5.5

IE5.5

IE6.0


IE6.0
Mozilal

事件捕捉:

IE使用冒泡型事件、相對的畅铭、Netscape使用了另一種稱為捕獲型事件(eventcapturing)的解決方案服傍、事件的捕獲和冒泡剛好相反的兩種過程——捕獲型事件中、事件從最不精確的對象(document對象)開始觸發(fā)巡雨、然后到最精確(也可以在窗口級別捕獲事件棍辕,不過必尋由開發(fā)人員特別指定)暮现。Netscape不會將頁面上的很多元素暴露給事件。繼續(xù)使用前面的代碼示例楚昭、事件按照下面的路徑傳播:

(1)document

(2) 《div》

有些人也稱之為自頂向下的事件模型栖袋,因?yàn)樗菑腄OM層次的頂端開始向下延伸的:

事件捕捉

DOM事件流:

DOM(文檔對象模型)結(jié)構(gòu)是一個樹型結(jié)構(gòu),當(dāng)一個HTML元素產(chǎn)生一個事件時(shí)抚太,該事件會在元素結(jié)點(diǎn)與根節(jié)點(diǎn)之間按特定的順序傳播塘幅,路徑所經(jīng)過的節(jié)點(diǎn)都會收到該事件,這個傳播過程可稱為DOM事件流凭舶。事件順序有兩種類型:事件捕捉和事件冒泡晌块。

DOM標(biāo)準(zhǔn)的事件模型

我們已經(jīng)對上面兩個不同的事件模型進(jìn)行了解釋和對比。DOM標(biāo)準(zhǔn)同時(shí)支持兩種事件模型帅霜,即捕獲型事件與冒泡型事件,但是呼伸,捕獲型事件先發(fā)生身冀。兩種事件流都會觸發(fā)DOM中的所有對象,從document對象開始括享,也在document對象結(jié)束(大部分兼容標(biāo)準(zhǔn)的瀏覽器會繼續(xù)將事件是捕捉/冒泡延續(xù)到window對象)搂根。繼續(xù)使用前面的例子、在與DOM兼容的瀏覽器中點(diǎn)擊

元素時(shí)铃辖、事件流的進(jìn)行如下圖:

捕獲事件&&冒泡事件

注意因?yàn)槭录哪繕?biāo)(元素)是最精確的元素(于是剩愧,在DOM樹中最深),實(shí)際上它會接收兩次事件娇斩,一次在捕獲過程中仁卷,另一次在冒泡過程中。DOM事件模型的最獨(dú)特的性質(zhì)是犬第,文本節(jié)點(diǎn)也觸發(fā)事件(在IE不會)锦积。所以如果點(diǎn)擊示例中的點(diǎn)擊、實(shí)際的事件流應(yīng)該是:

捕獲事件&&冒泡事件
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末歉嗓,一起剝皮案震驚了整個濱河市丰介,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖哮幢,帶你破解...
    沈念sama閱讀 211,042評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件带膀,死亡現(xiàn)場離奇詭異,居然都是意外死亡橙垢,警方通過查閱死者的電腦和手機(jī)垛叨,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 89,996評論 2 384
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來钢悲,“玉大人点额,你說我怎么就攤上這事≥毫眨” “怎么了还棱?”我有些...
    開封第一講書人閱讀 156,674評論 0 345
  • 文/不壞的土叔 我叫張陵,是天一觀的道長惭等。 經(jīng)常有香客問我珍手,道長,這世上最難降的妖魔是什么辞做? 我笑而不...
    開封第一講書人閱讀 56,340評論 1 283
  • 正文 為了忘掉前任琳要,我火速辦了婚禮,結(jié)果婚禮上秤茅,老公的妹妹穿的比我還像新娘稚补。我一直安慰自己,他們只是感情好框喳,可當(dāng)我...
    茶點(diǎn)故事閱讀 65,404評論 5 384
  • 文/花漫 我一把揭開白布课幕。 她就那樣靜靜地躺著,像睡著了一般五垮。 火紅的嫁衣襯著肌膚如雪乍惊。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,749評論 1 289
  • 那天放仗,我揣著相機(jī)與錄音润绎,去河邊找鬼。 笑死诞挨,一個胖子當(dāng)著我的面吹牛莉撇,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播亭姥,決...
    沈念sama閱讀 38,902評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼稼钩,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了达罗?” 一聲冷哼從身側(cè)響起坝撑,我...
    開封第一講書人閱讀 37,662評論 0 266
  • 序言:老撾萬榮一對情侶失蹤静秆,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后巡李,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體抚笔,經(jīng)...
    沈念sama閱讀 44,110評論 1 303
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 36,451評論 2 325
  • 正文 我和宋清朗相戀三年侨拦,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了殊橙。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 38,577評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡狱从,死狀恐怖膨蛮,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情季研,我是刑警寧澤敞葛,帶...
    沈念sama閱讀 34,258評論 4 328
  • 正文 年R本政府宣布,位于F島的核電站与涡,受9級特大地震影響惹谐,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜驼卖,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,848評論 3 312
  • 文/蒙蒙 一氨肌、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧酌畜,春花似錦怎囚、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,726評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至埠戳,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間蕉扮,已是汗流浹背整胃。 一陣腳步聲響...
    開封第一講書人閱讀 31,952評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留喳钟,地道東北人屁使。 一個月前我還...
    沈念sama閱讀 46,271評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像奔则,于是被迫代替她去往敵國和親蛮寂。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 43,452評論 2 348

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

  • 以下文章為轉(zhuǎn)載易茬,對理解JavaScript中的事件處理機(jī)制很有幫助酬蹋,淺顯易懂及老,特分享于此。 什么是事件范抓? 事件(E...
    jxyjxy閱讀 3,028評論 1 10
  • JavaScript 程序采用了異步事件驅(qū)動編程模型骄恶。在這種程序設(shè)計(jì)風(fēng)格下,當(dāng)文檔匕垫、瀏覽器僧鲁、元素或與之相關(guān)的對象發(fā)...
    劼哥stone閱讀 1,252評論 3 11
  • 嘛,總的來說呢:冒泡型事件的基本思想是洲鸠、事件按照從最特定的事件目標(biāo)到最不特定的事件目標(biāo)(document對象)的順...
    bug體質(zhì)閱讀 645評論 6 1
  • 一份工作除了能養(yǎng)活人還有一個美好期待在里面堂淡,最美不過。 青歌除了熟悉和整理圖書扒腕,就是在A011的附近轉(zhuǎn)來轉(zhuǎn)去绢淀。他自...
    君子包閱讀 229評論 2 5
  • 什么時(shí)候家變成一座冰冷的城?或許它從開始就是吧瘾腰,只是起初擁有那燃燒的心與那熱血皆的,才會覺得溫暖如春吧,而今心...
    戀雪的云閱讀 142評論 0 0