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
110
Google Analytics 分享 2 - 版面配置/資訊主頁/資料層級
winwu
0
380
Google Analytics 分享 1 - 基礎知識篇
winwu
0
360
HTML_CSS_前端基礎講座-4.pdf
winwu
0
450
HTML/CSS 前端基礎講座-3
winwu
0
470
HTML/CSS 前端基礎講座-2
winwu
0
490
2016 HTML CSS 前端基礎講座-1
winwu
1
570
2016 中正大學 weic.tw - RWD
winwu
3
1k
Other Decks in Programming
See All in Programming
Catch Up: Go Style Guide Update
andpad
0
250
その面倒な作業、「Dart」にやらせませんか? Flutter開発者のための業務効率化
yordgenome03
1
140
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
Webサーバーサイド言語としてのRustについて
kouyuume
1
4.9k
Migration to Signals, Resource API, and NgRx Signal Store
manfredsteyer
PRO
0
120
React Nativeならぬ"Vue Native"が実現するかも?_新世代マルチプラットフォーム開発フレームワークのLynxとLynxのVue.js対応を追ってみよう_Vue Lynx
yut0naga1_fa
2
1.5k
CSC509 Lecture 08
javiergs
PRO
0
250
NIKKEI Tech Talk#38
cipepser
0
240
SODA - FACT BOOK(JP)
sodainc
1
8.8k
バッチ処理を「状態の記録」から「事実の記録」へ
panda728
PRO
0
190
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
240
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
260
Featured
See All Featured
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
3.1k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
230
22k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Facilitating Awesome Meetings
lara
57
6.6k
Build The Right Thing And Hit Your Dates
maggiecrowley
38
2.9k
Keith and Marios Guide to Fast Websites
keithpitt
411
23k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
How to train your dragon (web standard)
notwaldorf
97
6.3k
The Language of Interfaces
destraynor
162
25k
Scaling GitHub
holman
463
140k
Unsuck your backbone
ammeep
671
58k
Testing 201, or: Great Expectations
jmmastey
45
7.7k
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(); 這個也是跟冒泡有關的 它的作用是:事件處理過程中,不阻止事件冒泡,但阻止默認行為