javascript事件捕獲和事件冒泡

一贞岭、什么是事件捕獲和事件冒泡

微軟提出了事件冒泡(event bubbling)的事件流糟把,即事件從最內層的元素開始亩钟,一層層往上傳播乓梨,直到document結束。與之相對應的網(wǎng)景提出了名為事件捕獲(event capturing)的事件流,即事件從最外層的元素開始也就是從document開始一層層往下傳遞清酥。

“DOM2級事件”規(guī)范要求應該從document對象開始傳播扶镀,但是這些瀏覽器都是從window對象開始捕獲事件的。

二焰轻、為什么用事件捕獲和事件冒泡

事件捕獲和事件冒泡的概念的提出是為了解決頁面元素事件發(fā)生的順序問題臭觉。

<div id="div1">

<div id="div2"></div>

</div>

?當div1和div2都綁定click事件的時候,我們需要知道兩個div事件的觸發(fā)的順序,作出相應的處 ?理蝠筑。

三狞膘、怎么用事件捕獲和事件冒泡

1.在javascript中,使用addEventListener()來給元素綁定事件

EventTarget.addEventListener(type,listener,useCapture)

type:需要監(jiān)聽的事件類型

listener:事件觸發(fā)之后執(zhí)行的函數(shù)

useCapture:默認為false什乙,表示使用事件冒泡挽封,即div2先被點擊;設置為true稳强,表示使用事件捕獲场仲,即div1先被點擊。

2.在jquery中退疫,不支持事件捕獲渠缕,僅僅支持事件冒泡

jquery提供了停止事件冒泡的方法:event.stopPropagation();可以阻止事件中其他對象的事件處理函數(shù)被執(zhí)行褒繁。

jquery還提供了阻止默認行為的方法:event.preventDefault()亦鳞;例如:提交表單的時候,對表單進行前端驗證棒坏,驗證不通過的時候燕差,阻止表單提交 ,就可以使用此方法坝冕。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末徒探,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子喂窟,更是在濱河造成了極大的恐慌测暗,老刑警劉巖,帶你破解...
    沈念sama閱讀 221,820評論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件磨澡,死亡現(xiàn)場離奇詭異碗啄,居然都是意外死亡,警方通過查閱死者的電腦和手機稳摄,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,648評論 3 399
  • 文/潘曉璐 我一進店門稚字,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人厦酬,你說我怎么就攤上這事胆描。” “怎么了仗阅?”我有些...
    開封第一講書人閱讀 168,324評論 0 360
  • 文/不壞的土叔 我叫張陵昌讲,是天一觀的道長。 經(jīng)常有香客問我霹菊,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 59,714評論 1 297
  • 正文 為了忘掉前任旋廷,我火速辦了婚禮鸠按,結果婚禮上,老公的妹妹穿的比我還像新娘饶碘。我一直安慰自己目尖,他們只是感情好,可當我...
    茶點故事閱讀 68,724評論 6 397
  • 文/花漫 我一把揭開白布扎运。 她就那樣靜靜地躺著瑟曲,像睡著了一般。 火紅的嫁衣襯著肌膚如雪豪治。 梳的紋絲不亂的頭發(fā)上洞拨,一...
    開封第一講書人閱讀 52,328評論 1 310
  • 那天,我揣著相機與錄音负拟,去河邊找鬼烦衣。 笑死,一個胖子當著我的面吹牛掩浙,可吹牛的內容都是我干的花吟。 我是一名探鬼主播,決...
    沈念sama閱讀 40,897評論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼厨姚,長吁一口氣:“原來是場噩夢啊……” “哼衅澈!你這毒婦竟也來了?” 一聲冷哼從身側響起谬墙,我...
    開封第一講書人閱讀 39,804評論 0 276
  • 序言:老撾萬榮一對情侶失蹤今布,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后芭梯,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體险耀,經(jīng)...
    沈念sama閱讀 46,345評論 1 318
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 38,431評論 3 340
  • 正文 我和宋清朗相戀三年玖喘,在試婚紗的時候發(fā)現(xiàn)自己被綠了甩牺。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,561評論 1 352
  • 序言:一個原本活蹦亂跳的男人離奇死亡累奈,死狀恐怖贬派,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情澎媒,我是刑警寧澤搞乏,帶...
    沈念sama閱讀 36,238評論 5 350
  • 正文 年R本政府宣布,位于F島的核電站戒努,受9級特大地震影響请敦,放射性物質發(fā)生泄漏镐躲。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,928評論 3 334
  • 文/蒙蒙 一侍筛、第九天 我趴在偏房一處隱蔽的房頂上張望萤皂。 院中可真熱鬧,春花似錦匣椰、人聲如沸裆熙。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,417評論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽入录。三九已至,卻和暖如春佳镜,著一層夾襖步出監(jiān)牢的瞬間僚稿,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,528評論 1 272
  • 我被黑心中介騙來泰國打工邀杏, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留贫奠,地道東北人。 一個月前我還...
    沈念sama閱讀 48,983評論 3 376
  • 正文 我出身青樓望蜡,卻偏偏與公主長得像唤崭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子脖律,可洞房花燭夜當晚...
    茶點故事閱讀 45,573評論 2 359

推薦閱讀更多精彩內容

  • 以下文章為轉載谢肾,對理解JavaScript中的事件處理機制很有幫助,淺顯易懂小泉,特分享于此芦疏。 什么是事件? 事件(E...
    jxyjxy閱讀 3,041評論 1 10
  • 背景知識 什么是事件微姊?直觀的說就是網(wǎng)頁上發(fā)生的事情酸茴,大部分是指用戶的鼠標動作和鍵盤動作,如點擊兢交、移動鼠標薪捍、按下某個...
    吧啦啦小湯圓閱讀 1,852評論 2 15
  • 事件綁定的方式 給 DOM 元素綁定事件分為兩大類:在 html 中直接綁定 和 在 JavaScript 中綁定...
    Bruce_zhuan閱讀 1,039評論 0 6
  • 通過jQuery,您可以選扰湓(查詢酪穿,query)HTML元素,并對它們執(zhí)行“操作”(actions)晴裹。 jQuer...
    枇杷樹8824閱讀 659評論 0 3
  • 深夜的房間里 黑暗中開起了一個無聲無息的聚會 只有斷斷續(xù)續(xù)的鼾聲 和那翻身時床的嘎吱聲 為之伴奏 黑作為背景上演了...
    洛千雨閱讀 196評論 0 0