js事件傳播流程,事件阻止

js事件傳播流程主要分三個階段:事件捕獲階段浮创、處于目標階段忧吟、事件冒泡階段。

  在我們平常用的addEventListener方法中斩披,一般只會用到兩個參數溜族,一個是需要綁定的事件,另一個是觸發(fā)事件后要執(zhí)行的函數雏掠,然而斩祭,addEventListener還可以傳入第三個參數,第三個參數默認值是false乡话,表示在事件冒泡階段調用事件處理函數;如果參數為true摧玫,則表示在事件捕獲階段調用處理函數。


?  (1).捕獲階段:事件從根節(jié)點流向目標節(jié)點绑青,途中流經各個DOM節(jié)點诬像,在各個節(jié)點上觸發(fā)捕獲事件,直到達到目標節(jié)點闸婴。


?  (2).目標(target)階段:在此階段中坏挠,事件傳導到目標節(jié)點。瀏覽器在查找到已經指定給目標事件的監(jiān)聽器后邪乍,就會運行該監(jiān)聽器降狠。

? ? ? ? (3).事件冒泡:?當為多個嵌套的元素設置了相同的事件處理程序,它們將觸發(fā)事件冒泡機制庇楞。在事件冒泡中榜配,最內部的元素將首先觸發(fā)其事件,然后是棧內的下一個元素觸發(fā)該事件吕晌,以此類推蛋褥,直到到達最外面的元素。如果把事件處理程序指定給所有的元素睛驳,那么這些事件將依次觸發(fā)烙心。

?????????????????如何阻止冒泡??

可以調用事件對象的stopPropagation()方法以阻止事件的繼續(xù)傳播。如果在同一對象上定義了其他處理程序乏沸,剩下的處理程序將依舊被調用淫茵,但調用stopPropagation()之后任何其他對象上的事件處理程序將不會被調用。

? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 阻止瀏覽器默認行為

? ? ?事件默認行為:瀏覽器自己默認做的事情

? ? ?哪些默認行為要做阻止

? ? ? 1.? a標簽鏈接跳轉

? ? ? 2.? Submit按鈕的提交蹬跃,

? ? ?阻止默認行為的方式

? ? ?event.preventDefault(); ?event.returnValue = false; ?return false;

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末痘昌,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌辆苔,老刑警劉巖算灸,帶你破解...
    沈念sama閱讀 218,546評論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異驻啤,居然都是意外死亡菲驴,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,224評論 3 395
  • 文/潘曉璐 我一進店門骑冗,熙熙樓的掌柜王于貴愁眉苦臉地迎上來赊瞬,“玉大人,你說我怎么就攤上這事贼涩∏山В” “怎么了?”我有些...
    開封第一講書人閱讀 164,911評論 0 354
  • 文/不壞的土叔 我叫張陵遥倦,是天一觀的道長谤绳。 經常有香客問我,道長袒哥,這世上最難降的妖魔是什么缩筛? 我笑而不...
    開封第一講書人閱讀 58,737評論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮堡称,結果婚禮上瞎抛,老公的妹妹穿的比我還像新娘。我一直安慰自己却紧,他們只是感情好桐臊,可當我...
    茶點故事閱讀 67,753評論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著晓殊,像睡著了一般豪硅。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上挺物,一...
    開封第一講書人閱讀 51,598評論 1 305
  • 那天,我揣著相機與錄音飘弧,去河邊找鬼识藤。 笑死,一個胖子當著我的面吹牛次伶,可吹牛的內容都是我干的痴昧。 我是一名探鬼主播,決...
    沈念sama閱讀 40,338評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼冠王,長吁一口氣:“原來是場噩夢啊……” “哼赶撰!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 39,249評論 0 276
  • 序言:老撾萬榮一對情侶失蹤豪娜,失蹤者是張志新(化名)和其女友劉穎餐胀,沒想到半個月后,有當地人在樹林里發(fā)現(xiàn)了一具尸體瘤载,經...
    沈念sama閱讀 45,696評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡否灾,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,888評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸣奔。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片墨技。...
    茶點故事閱讀 40,013評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖挎狸,靈堂內的尸體忽然破棺而出扣汪,到底是詐尸還是另有隱情,我是刑警寧澤锨匆,帶...
    沈念sama閱讀 35,731評論 5 346
  • 正文 年R本政府宣布崭别,位于F島的核電站,受9級特大地震影響统刮,放射性物質發(fā)生泄漏紊遵。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 41,348評論 3 330
  • 文/蒙蒙 一侥蒙、第九天 我趴在偏房一處隱蔽的房頂上張望暗膜。 院中可真熱鬧,春花似錦鞭衩、人聲如沸学搜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,929評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽瑞佩。三九已至,卻和暖如春坯台,著一層夾襖步出監(jiān)牢的瞬間炬丸,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,048評論 1 270
  • 我被黑心中介騙來泰國打工蜒蕾, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留稠炬,地道東北人。 一個月前我還...
    沈念sama閱讀 48,203評論 3 370
  • 正文 我出身青樓咪啡,卻偏偏與公主長得像首启,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子撤摸,可洞房花燭夜當晚...
    茶點故事閱讀 44,960評論 2 355

推薦閱讀更多精彩內容

  • ??JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的。 ??事件钥飞,就是文檔或瀏覽器窗口中發(fā)生的一些特...
    霜天曉閱讀 3,493評論 1 11
  • js事件傳播流程主要分三個階段:事件捕獲階段代承、處于目標階段汁蝶、事件冒泡階段。 在我們平常用的addEventLis...
    相識菩提閱讀 281評論 0 1
  • JavaScript 與 HTML 之間的交互是通過事件實現(xiàn)的论悴。事件掖棉,就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬...
    LemonnYan閱讀 680評論 0 4
  • Dom事件 事件是一種異步編程的實現(xiàn)方式,本質上是程序各個組成部分之間的通信膀估。DOM支持大量的事件 (一) Eve...
    woow_wu7閱讀 1,775評論 0 1
  • JavaScript 程序采用了異步事件驅動編程模型幔亥。在這種程序設計風格下,當文檔察纯、瀏覽器帕棉、元素或與之相關的對象發(fā)...
    劼哥stone閱讀 1,256評論 3 11