關于事件捕獲和事件冒泡

DOM事件標準定義了兩種事件流,這倆種事件流有著顯著的不同并且可能對你的應用有著相當大的影響毒嫡。這倆種事件流分別是捕獲(Capture)和冒泡(Bubble)癌蚁。

Netscape和微軟之前關于這方面各自提出了解決方案,其中Netscape選擇實現(xiàn)了捕獲事件流,而微軟則實現(xiàn)了冒泡事件流努释。最后W3C決定組合這倆種方法碘梢,并且大多數(shù)新瀏覽器都遵循這兩種事件流方式。

對于Safari伐蒂、chrome煞躬、Firefox這三個用addEventListener('監(jiān)聽事件類型的名稱',匿名函數(shù)逸邦,處理此事件的事件流(true和false))恩沛。

對于IE和Opera用于attachEvent('on'+監(jiān)聽事件類型的名稱,匿名函數(shù)缕减,處理此事件的事件流false)這里我們注意的是對于IE6~10雷客,IE11不支持。IE不支持事件捕獲桥狡。

這里true指的是事件捕獲搅裙、false指的是事件冒泡【主要是指事件發(fā)生在哪個階段】

事件冒泡:事件從事件目標(target)開始,往上冒泡直到頁面的最上一級標簽总放。事件由子元素向祖先元素傳播的呈宇,就 像氣泡從水底向水面上浮一樣。當事件在某一DOM元素被觸發(fā)時局雄,例如用戶在客戶名字節(jié)點上點擊鼠標甥啄,事件將跟隨著該節(jié)點繼承自的各個父節(jié)點冒泡穿過整個的DOM節(jié)點層次,直到它 遇到依附有該事件類型處理器的節(jié)點炬搭,此時蜈漓,該事件是onclick事件。在冒泡過程中的任何時候都可以終止事件的冒泡宫盔。

事件捕獲:事件從最上一級標簽開始往下查找融虽,直到捕獲到事件目標(target)。捕獲階段是一個和冒泡階段完全相反的過程灼芭,即事件由祖先元素向子元素傳播有额,和一個石子兒從水面向水底下沉一樣。事件的處理將從DOM層次的根開始彼绷,而不是從觸發(fā)事件的目標元素開始巍佑,事件被從目標元素的所有祖先元素依次往下傳遞。在這個過程中寄悯,事件會被從文檔 根到事件目標元素之間各個繼承派生的元素所捕獲萤衰。

下圖給出事件捕獲和事件冒泡:

以上就是我個人對這個知識點的理解。

最后編輯于
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末猜旬,一起剝皮案震驚了整個濱河市脆栋,隨后出現(xiàn)的幾起案子倦卖,更是在濱河造成了極大的恐慌,老刑警劉巖椿争,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件怕膛,死亡現(xiàn)場離奇詭異,居然都是意外死亡丘薛,警方通過查閱死者的電腦和手機嘉竟,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門邦危,熙熙樓的掌柜王于貴愁眉苦臉地迎上來洋侨,“玉大人,你說我怎么就攤上這事倦蚪∠<幔” “怎么了?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵陵且,是天一觀的道長裁僧。 經(jīng)常有香客問我,道長慕购,這世上最難降的妖魔是什么聊疲? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任,我火速辦了婚禮沪悲,結果婚禮上获洲,老公的妹妹穿的比我還像新娘。我一直安慰自己殿如,他們只是感情好贡珊,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著涉馁,像睡著了一般门岔。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上烤送,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天寒随,我揣著相機與錄音,去河邊找鬼帮坚。 笑死妻往,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的叶沛。 我是一名探鬼主播蒲讯,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼灰署!你這毒婦竟也來了判帮?” 一聲冷哼從身側響起局嘁,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎晦墙,沒想到半個月后悦昵,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡晌畅,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年但指,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片抗楔。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡棋凳,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出连躏,到底是詐尸還是另有隱情剩岳,我是刑警寧澤,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布入热,位于F島的核電站拍棕,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏勺良。R本人自食惡果不足惜绰播,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望尚困。 院中可真熱鬧蠢箩,春花似錦、人聲如沸尾组。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽讳侨。三九已至呵萨,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間跨跨,已是汗流浹背潮峦。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留勇婴,地道東北人忱嘹。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像耕渴,于是被迫代替她去往敵國和親拘悦。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

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

  • 背景知識 什么是事件橱脸?直觀的說就是網(wǎng)頁上發(fā)生的事情础米,大部分是指用戶的鼠標動作和鍵盤動作分苇,如點擊、移動鼠標屁桑、按下某個...
    吧啦啦小湯圓閱讀 1,838評論 2 15
  • 以下文章為轉載医寿,對理解JavaScript中的事件處理機制很有幫助,淺顯易懂蘑斧,特分享于此靖秩。 什么是事件? 事件(E...
    jxyjxy閱讀 3,028評論 1 10
  • JavaScript 程序采用了異步事件驅(qū)動編程模型竖瘾。在這種程序設計風格下沟突,當文檔、瀏覽器准浴、元素或與之相關的對象發(fā)...
    劼哥stone閱讀 1,252評論 3 11
  • (1)冒泡型事件:事件按照從最特定的事件目標到最不特定的事件目標(document對象)的順序觸發(fā)事扭。 (2)捕獲型...
    逍遙g閱讀 433評論 2 0
  • 1,rails new XXX -d mysql -TB 創(chuàng)建項目 mysql是指關聯(lián)的數(shù)據(jù)庫 2乐横,cd 進入項目...
    星野君閱讀 837評論 0 1