冒泡事件的捕獲

1.干預系統(tǒng)的事件處理機制
(一)DOM事件流

DOM模型是一個樹形結構手幢,在DOM模型中,HTML元素是有層次的围来。當一個HTML元素上產(chǎn)生一個事件時监透,該事件會在DOM樹中元素節(jié)點與根節(jié)點之間按特定的順序傳播,路徑所經(jīng)過的節(jié)點都會收到該事件院刁,這個傳播過程就是DOM事件流。

DOM事件標準定義了兩種事件流醇滥,分別是捕獲事件和冒泡事件黎比。

1.冒泡事件流

默認情況下超营,事件使用冒泡事件流鸳玩。當事件(例如單擊事件)在某一DOM元素上被觸發(fā)時,事件將沿著該節(jié)點的各個父結點冒泡穿過整個DOM節(jié)點層次演闭。在冒泡過程中的任何時候都可以終止事件的冒泡不跟。如果不停止事件的傳播,事件將一直通過DOM冒泡直至到達文檔根米碰。
2.捕獲事件流

于冒泡模型相反窝革,在捕獲事件流模型中购城,事件的處理將從DOM層次的根開始,而不是從觸發(fā)事件的目標元素開始虐译,事件被從目標元素的所有所有祖先元素依次往下傳遞。在這個過程中漆诽,事件會被從文檔的根到事件目標元素之間各個繼承派生的元素所捕獲侮攀。
3.DOM標準的事件模型

DOM標準同時支持捕獲事件模型和冒泡事件模型,但是厢拭,捕獲事件模型先發(fā)生兰英。兩種事件流都會觸發(fā)DOM中的所有對象,從document對象開始供鸠,也在document對象結束畦贸。
4.事件傳導的3個階段

(1)事件捕捉(Capturing)階段:事件將沿著DOM樹向下傳送,經(jīng)過目標節(jié)點的每一個祖先節(jié)點楞捂,直至目標節(jié)點薄坏。例如,用戶單擊了一個超鏈接寨闹,則該單擊事件將從document節(jié)點轉送到html元素颤殴、body元素以及包含該鏈接的p元素。目標節(jié)點就是觸發(fā)事件的DOM節(jié)點鼻忠。

(2)目標(target)階段:在此階段中涵但,事件傳導到目標節(jié)點。瀏覽器在查找到已經(jīng)指定給目標事件的監(jiān)聽器后帖蔓,就會運行該監(jiān)聽器矮瘟。

(3)冒泡(Bubbling)階段:事件將沿著DOM樹向上轉送,再次逐個訪問目標元素的祖先節(jié)點直到document節(jié)點塑娇。該過程中的每一步澈侠,瀏覽器都將檢測那些不是捕捉事件監(jiān)聽器的事件監(jiān)聽器并執(zhí)行它們。(即:與觸發(fā)事件無關的事件監(jiān)聽器也由于冒泡將被執(zhí)行)埋酬。
二)停止事件冒泡

當事件(例如單擊事件)在某一DOM元素上被觸發(fā)時哨啃,事件將沿著該節(jié)點的各個父節(jié)點冒泡穿過整個DOM節(jié)點層次,直到遇到依附有該事件類型處理器的節(jié)點写妥。
(三)阻止事件的默認行為

事件的默認行為是指瀏覽器在事件傳遞和處理完成后自動執(zhí)行的與該事件關聯(lián)的默認動作拳球。例如,單擊一個超鏈接的默認行為是訪問其定義的url珍特。

IE和其他瀏覽器阻止事件的默認行為的方法不同祝峻。在IE中,可以通過設置event對象的returnValue屬性為false來阻止事件的默認行為;在其他瀏覽器中莱找,則可以通過設置event對象的preventDefault()方法來實現(xiàn)酬姆。

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市奥溺,隨后出現(xiàn)的幾起案子辞色,更是在濱河造成了極大的恐慌,老刑警劉巖浮定,帶你破解...
    沈念sama閱讀 217,734評論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件淫僻,死亡現(xiàn)場離奇詭異,居然都是意外死亡壶唤,警方通過查閱死者的電腦和手機雳灵,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,931評論 3 394
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來闸盔,“玉大人悯辙,你說我怎么就攤上這事∮常” “怎么了躲撰?”我有些...
    開封第一講書人閱讀 164,133評論 0 354
  • 文/不壞的土叔 我叫張陵,是天一觀的道長击费。 經(jīng)常有香客問我拢蛋,道長,這世上最難降的妖魔是什么蔫巩? 我笑而不...
    開封第一講書人閱讀 58,532評論 1 293
  • 正文 為了忘掉前任谆棱,我火速辦了婚禮,結果婚禮上圆仔,老公的妹妹穿的比我還像新娘垃瞧。我一直安慰自己,他們只是感情好坪郭,可當我...
    茶點故事閱讀 67,585評論 6 392
  • 文/花漫 我一把揭開白布个从。 她就那樣靜靜地躺著,像睡著了一般歪沃。 火紅的嫁衣襯著肌膚如雪嗦锐。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,462評論 1 302
  • 那天沪曙,我揣著相機與錄音奕污,去河邊找鬼。 笑死珊蟀,一個胖子當著我的面吹牛菊值,可吹牛的內容都是我干的。 我是一名探鬼主播育灸,決...
    沈念sama閱讀 40,262評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼腻窒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了磅崭?” 一聲冷哼從身側響起儿子,我...
    開封第一講書人閱讀 39,153評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎砸喻,沒想到半個月后柔逼,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,587評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡割岛,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,792評論 3 336
  • 正文 我和宋清朗相戀三年愉适,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片癣漆。...
    茶點故事閱讀 39,919評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡维咸,死狀恐怖,靈堂內的尸體忽然破棺而出惠爽,到底是詐尸還是另有隱情癌蓖,我是刑警寧澤,帶...
    沈念sama閱讀 35,635評論 5 345
  • 正文 年R本政府宣布婚肆,位于F島的核電站租副,受9級特大地震影響,放射性物質發(fā)生泄漏较性。R本人自食惡果不足惜用僧,卻給世界環(huán)境...
    茶點故事閱讀 41,237評論 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望赞咙。 院中可真熱鬧永毅,春花似錦、人聲如沸人弓。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,855評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽崔赌。三九已至意蛀,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間健芭,已是汗流浹背县钥。 一陣腳步聲響...
    開封第一講書人閱讀 32,983評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留慈迈,地道東北人若贮。 一個月前我還...
    沈念sama閱讀 48,048評論 3 370
  • 正文 我出身青樓省有,卻偏偏與公主長得像,于是被迫代替她去往敵國和親谴麦。 傳聞我的和親對象是個殘疾皇子蠢沿,可洞房花燭夜當晚...
    茶點故事閱讀 44,864評論 2 354

推薦閱讀更多精彩內容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的舷蟀。 ??事件,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,490評論 1 11
  • 1.干預系統(tǒng)的事件處理機制(一)DOM事件流 DOM模型是一個樹形結構面哼,在DOM模型中野宜,HTML元素是有層次的。當...
    isMyNickName閱讀 383評論 0 0
  • js之事件機制 1魔策、事件初探 1.1 js事件的概述 JavaScript事件:JavaScript是基于事件驅動...
    道無虛閱讀 2,362評論 1 3
  • 事件流 JavaScript與HTML之間的交互是通過事件實現(xiàn)的匈子。事件,就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互...
    DHFE閱讀 828評論 0 3
  • 以下文章為轉載闯袒,對理解JavaScript中的事件處理機制很有幫助旬牲,淺顯易懂,特分享于此搁吓。 什么是事件原茅? 事件(E...
    jxyjxy閱讀 3,035評論 1 10