Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Javascript冒泡事件原理
Search
winwu
January 28, 2013
Programming
8
12k
Javascript冒泡事件原理
winwu
January 28, 2013
Tweet
Share
More Decks by winwu
See All by winwu
Google Data Studio 分享
winwu
0
120
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
100
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
330
Google Analytics 分享 1 - 基礎知識篇
winwu
0
350
HTML_CSS_前端基礎講座-4.pdf
winwu
0
440
HTML/CSS 前端基礎講座-3
winwu
0
460
HTML/CSS 前端基礎講座-2
winwu
0
490
2016 HTML CSS 前端基礎講座-1
winwu
1
560
2016 中正大學 weic.tw - RWD
winwu
3
1k
Other Decks in Programming
See All in Programming
奥深くて厄介な「改行」と仲良くなる20分
oguemon
1
570
AIでLINEスタンプを作ってみた
eycjur
1
230
rage against annotate_predecessor
junk0612
0
170
為你自己學 Python - 冷知識篇
eddie
1
350
go test -json そして testing.T.Attr / Kyoto.go #63
utgwkk
3
310
API Platform 4.2: Redefining API Development
soyuka
0
140
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
Kiroで始めるAI-DLC
kaonash
2
630
AI Agents: How Do They Work and How to Build Them @ Shift 2025
slobodan
0
110
「手軽で便利」に潜む罠。 Popover API を WCAG 2.2の視点で安全に使うには
taitotnk
0
870
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
240
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
takahashiikki
1
120
Featured
See All Featured
A designer walks into a library…
pauljervisheath
207
24k
Side Projects
sachag
455
43k
YesSQL, Process and Tooling at Scale
rocio
173
14k
The Invisible Side of Design
smashingmag
301
51k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
A Tale of Four Properties
chriscoyier
160
23k
How STYLIGHT went responsive
nonsquared
100
5.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Unsuck your backbone
ammeep
671
58k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.9k
Docker and Python
trallard
46
3.6k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
Transcript
JQUERY & JAVASCRIPT 冒泡事件 Win take note@20121002
以下筆記皆由網路參考 參考網址來自於以下網址: • http://www.freezq.cn/article/485.htm • http://www.skygq.com/2011/02/08/jquery-stop-propagation/ • http://www.skygq.com/2011/02/08/jquery-stop-propa • http://www.cnblogs.com/zhongweiv/archive/2011/11/04/EventBubbling.htmlgation/
• http://hzw2312.blog.51cto.com/2590340/780230 (列出瀏覽器的冒泡流程圖) • http://www.cnblogs.com/zhongweiv/archive/2011/11/04/EventBubbling.html
什麼是冒泡事件? • 就是事件由底層往上層傳遞,當一個元素的事件被觸發時 (例如click),同樣的事件將會在那個元素的所有祖先元素中 被觸發,這一個過程被稱為冒泡事件,其過程有如下頁圖。 • 舉例: • 當在頁面建立了多個div時,相當於建立了父子關係,當父 div與子div共同加入了onclick事件時,當觸發了子div的
onclick事件後,子div進行相應的js操作,但是父div的onclick 事件同樣會被觸發,這就造成了事件的多層觸發,導致頁面 混亂,這就是冒泡事件。(這只是舉例,還有很多事件會造成 冒泡事件,例如mouseover也會造成冒泡事件)
HTML body div 目標元素(target) JavaScript事件捕獲與事件冒泡原理 事件捕獲 事件冒泡 useCapture =true useCapture
=false 事件捕獲階段:事件從最上一級標籤開始往下查找,直到捕獲到元素目標(target)。 事件冒泡階段:事件從元素目標(target)開始,往上冒泡直到頁面的最上一級標籤。
冒泡事件的好處: • (1)减少駐留在内存和頁面上的事件處理器,提高性能,降低 瀏覽器崩潰的風險。 • (2)在DOM更新後不必更新事件,如動態添加元素後無區绑 定事件,删除後也無需删除事件。 • 注意:不是所有事件都可以冒泡的。
冒泡事件的缺點: • 在某些情況下如不阻止事件冒泡會造成混亂,產生非自己想 要的結果。
如何阻止冒泡事件? • 1.event.stopPropagation(); (阻止事件冒泡,但不會阻止默認行為,如a的herf)
如何阻止冒泡事件? • 2.return false(); (阻止事件冒泡,也阻止了默認行為,即a連結不会跳轉)
如何阻止冒泡事件? • 3.event.preventDefault(); 這個也是跟冒泡有關的 它的作用是:事件處理過程中,不阻止事件冒泡,但阻止默認行為