DOM事件流

理解DOM事件流的三個(gè)階段

用術(shù)語(yǔ)說流是對(duì)輸入輸出設(shè)備的抽象。以程序的角度說,流是具有方向的數(shù)據(jù)简十。

事件流之事件冒泡與事件捕獲

瀏覽器發(fā)展的過程中俱尼,開發(fā)團(tuán)隊(duì)遇到了一個(gè)問題。那就是頁(yè)面中的哪一部分擁有特定的事件色冀?
可以想象畫在一張紙上的一組同心圓,如果你把手指放在圓心上,那么你的手指指向的其實(shí)不是一個(gè)圓幔嗦,而是紙上所有的圓。放到實(shí)際頁(yè)面中就是沥潭,你點(diǎn)擊一個(gè)按鈕邀泉,事實(shí)上你還同時(shí)點(diǎn)擊了按鈕所有的父元素。
開發(fā)團(tuán)隊(duì)的問題就在于叛氨,當(dāng)點(diǎn)擊按鈕時(shí)呼渣,是按鈕最外層的父元素先收到事件并執(zhí)行,還是具體元素先收到事件并執(zhí)行寞埠?所以這兒引入了事件流的概念屁置。

事件流所描述的就是從頁(yè)面中接受事件的順序。

因?yàn)橛袃煞N觀點(diǎn)仁连,所以事件流也有兩種蓝角,分別是事件冒泡和事件捕獲。現(xiàn)行的主流是事件冒泡饭冬。

事件冒泡

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末使鹅,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子昌抠,更是在濱河造成了極大的恐慌患朱,老刑警劉巖,帶你破解...
    沈念sama閱讀 218,451評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件炊苫,死亡現(xiàn)場(chǎng)離奇詭異裁厅,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)侨艾,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,172評(píng)論 3 394
  • 文/潘曉璐 我一進(jìn)店門执虹,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人唠梨,你說我怎么就攤上這事袋励。” “怎么了?”我有些...
    開封第一講書人閱讀 164,782評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵茬故,是天一觀的道長(zhǎng)盖灸。 經(jīng)常有香客問我,道長(zhǎng)均牢,這世上最難降的妖魔是什么糠雨? 我笑而不...
    開封第一講書人閱讀 58,709評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮徘跪,結(jié)果婚禮上甘邀,老公的妹妹穿的比我還像新娘。我一直安慰自己垮庐,他們只是感情好松邪,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,733評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著哨查,像睡著了一般逗抑。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上寒亥,一...
    開封第一講書人閱讀 51,578評(píng)論 1 305
  • 那天邮府,我揣著相機(jī)與錄音,去河邊找鬼溉奕。 笑死褂傀,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的加勤。 我是一名探鬼主播仙辟,決...
    沈念sama閱讀 40,320評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼鳄梅!你這毒婦竟也來了叠国?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,241評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤戴尸,失蹤者是張志新(化名)和其女友劉穎粟焊,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體孙蒙,經(jīng)...
    沈念sama閱讀 45,686評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡项棠,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,878評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了马篮。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片沾乘。...
    茶點(diǎn)故事閱讀 39,992評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡怜奖,死狀恐怖浑测,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤迁央,帶...
    沈念sama閱讀 35,715評(píng)論 5 346
  • 正文 年R本政府宣布掷匠,位于F島的核電站,受9級(jí)特大地震影響岖圈,放射性物質(zhì)發(fā)生泄漏讹语。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,336評(píng)論 3 330
  • 文/蒙蒙 一蜂科、第九天 我趴在偏房一處隱蔽的房頂上張望顽决。 院中可真熱鬧,春花似錦导匣、人聲如沸才菠。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,912評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)赋访。三九已至,卻和暖如春缓待,著一層夾襖步出監(jiān)牢的瞬間蚓耽,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,040評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工旋炒, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留步悠,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,173評(píng)論 3 370
  • 正文 我出身青樓国葬,卻偏偏與公主長(zhǎng)得像贤徒,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子汇四,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,947評(píng)論 2 355

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

  • ??JavaScript 與 HTML 之間的交互是通過事件實(shí)現(xiàn)的通孽。 ??事件序宦,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,491評(píng)論 1 11
  • 定義: 事件:用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作。(click,load,mouseover) 事件流:從頁(yè)面中接收事...
    機(jī)智的馬里奧閱讀 547評(píng)論 1 6
  • 1-事件流是怎么提出的(為什9么要用事件流): 假如想象我們?cè)谕粡埣埳袭嫼枚鄠€(gè)同心圓,但是當(dāng)我們?nèi)ブ赶蜻@個(gè)圓心的...
    stars甜閱讀 462評(píng)論 0 4
  • 什么是事件流背苦? 事件流:描述的就是從頁(yè)面中接受事件的順序互捌。分有事件冒泡與事件捕獲兩種。 什么是事件冒泡行剂? 事件冒泡...
    猿小v閱讀 1,110評(píng)論 0 7
  • “認(rèn)養(yǎng)農(nóng)業(yè)”是近年來新興的農(nóng)業(yè)增值發(fā)展厚宰,令簡(jiǎn)單乏味的農(nóng)業(yè)作業(yè)"華麗轉(zhuǎn)身"腌巾。消費(fèi)者預(yù)付生產(chǎn)費(fèi)用遂填,生產(chǎn)者為消費(fèi)者提供綠...
    云農(nóng)生活會(huì)閱讀 1,384評(píng)論 0 0