Re: [問題] Javascript Event Capture/Bubble

[eight0 (自宅程式猿)]

※ 引述《ericdoctor (小黑)》之銘言：
: 各位好
: 小的是前端新手
: 近來讀到javascript event在瀏覽器的發生的兩個階段
: 也就是 event bubbling/capturing
: 想請問各位~
: 關於這兩種事件處理有什麼應用嗎??
: 因為好像IE8以前都不支援~
: 所以老舊的網頁都沒有相關的code
: Google也找不到我想要的結果
: 請各位指教
: 謝謝

事件的觸發順序可以參考這張圖︰
http://www.w3.org/TR/DOM-Level-3-Events/eventflow.svg

以 form 為例子︰

1. 你想做一個按鈕，按下後會跳出懸浮選單
2. 選單上有按鈕可以做某些事
3. 按任意空白處隱藏懸浮選單
4. 等待連線時，把整個 form 禁用

可以分別註冊四個不同的事件

1. button.click + stopPropagation，顯示懸浮選單
2. button.click + stopPropagation，執行選單上的項目
3. document.click，隱藏懸浮選單
4. form.click + capture + stopPropagation

button.click + stopPropagation 可以讓事件不要往上 bubble，
否則 document.click 收到 bubbled event 就會把懸浮選單給隱
藏。

form.click + capture + stopPropagation 可以讓事件連 target
phase 都到不了，保證 form 內的 click event 不會被觸發。


但是以我的角度來說的話，我會建議無論如何都不要用 capture，
除非你確定你要的特殊功能必須使用 capture（e.g. 側錄鍵盤︰
window.keydown + capture；url rewrite︰window.click +
capture），否則應該都有更好的做法。

--
(*￣▽￣)/‧★*"`'*-.,_,.-*'`"*-.,_☆,.-*`

http://i.imgur.com/oAd97.png

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 111.248.149.56
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1435859392.A.4B5.html
推 ericdoctor: 感謝80大指教 沒有想過這種用法 大概了解了!!! 謝謝:-
→ ericdoctor: )