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
110
Google Analytics 分享 3 - 內容分組/自訂廣告活動/目標/事件
winwu
0
97
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
310
Google Analytics 分享 1 - 基礎知識篇
winwu
0
350
HTML_CSS_前端基礎講座-4.pdf
winwu
0
430
HTML/CSS 前端基礎講座-3
winwu
0
460
HTML/CSS 前端基礎講座-2
winwu
0
480
2016 HTML CSS 前端基礎講座-1
winwu
1
560
2016 中正大學 weic.tw - RWD
winwu
3
990
Other Decks in Programming
See All in Programming
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
600
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
140
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
660
技術同人誌をMCP Serverにしてみた
74th
1
630
関数型まつりレポート for JuliaTokai #22
antimon2
0
160
プロダクト志向ってなんなんだろうね
righttouch
PRO
0
180
CursorはMCPを使った方が良いぞ
taigakono
1
240
ふつうの技術スタックでアート作品を作ってみる
akira888
0
460
Team operations that are not burdened by SRE
kazatohiei
1
310
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
3
800
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
seike460
PRO
3
750
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
2
640
Featured
See All Featured
Automating Front-end Workflow
addyosmani
1370
200k
Scaling GitHub
holman
459
140k
Code Reviewing Like a Champion
maltzj
524
40k
Into the Great Unknown - MozCon
thekraken
39
1.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
The Art of Programming - Codeland 2020
erikaheidi
54
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
667
120k
A designer walks into a library…
pauljervisheath
207
24k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Distributed Sagas: A Protocol for Coordinating Microservices
caitiem20
331
22k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.1k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
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(); 這個也是跟冒泡有關的 它的作用是:事件處理過程中,不阻止事件冒泡,但阻止默認行為