js手札--關于事件冒泡與事件捕獲

lentoo 發布于2019-08-19 18:35 / 3459人閱讀

摘要：一冒泡和捕獲事件執行子元素在執行某個事件的前后，會引起上層元素觸發相同事件。三補充關于和這兩個其實和捕獲與冒泡一點關系都沒有，是用來阻止事件的默認行為的。

一、冒泡和捕獲

事件執行：子元素在執行某個事件的前后，會引起上層元素觸發相同事件。例：我點擊了div，那么不光div會執行click事件，上層的body和html等等也會執行click。

冒泡與捕獲解決了：事件執行順序由誰開始，由誰結束

事件冒泡：click執行順序（div -> body -> html -> document）

事件捕獲：click執行順序（document -> html -> body -> div）

冒泡與捕獲方法

IE < 9：只冒泡

    target.attachEvent(eventName, callback)  //只能冒泡
    target.detachEvent(eventName, callback)

IE9+ | chrome | firefox | safari：冒泡+捕獲

    target.addEventListener(eventName, callback) // 冒泡方式
    target.removeEventListener(eventName, callback)
    
    target.addEventListener(eventName, callback, true)  // 捕獲方式
    target.removeEventListener(eventName, callback, true)

（一）事件冒泡

啥也不說，看例子，點擊t2區域：

很明顯的，由內而外，沒啥可說的。我這邊沒裝IE，所以所以測試都是在（chrome，firfox，safari中測試的）。

（二）事件捕獲

同樣點擊t2區域，可以見到變成由外而內：

（三）先捕獲后冒泡

這次點擊t1區域，先捕獲，后冒泡

二、阻止冒泡和捕獲

IE和Netscape的阻止方式

IE：event.stopPropagation()

Netscape：e.cancelBubble = true;

（一）阻止冒泡

同樣點擊t2區域，可以見到t3的click事件就不會被觸發了。

（二）阻止捕獲

同樣點擊t2區域，可以見到t2的click事件沒有被觸發。因為我們在觸發t3的時候，讓捕獲停止了，那樣t2也就接受不到要觸發click的消息了，也就over了。

三、補充

關于Netscape: preventDefault()和IE: event.returnValue

這兩個其實和捕獲與冒泡一點關系都沒有，是用來阻止事件的默認行為的。如：我點擊標簽，正常說會執行跳轉相應網頁。但加入preventDefault()后就不會跳轉了。

看例子：
照理說我點擊了t1, 那應該會正常跳轉才對

但加了下面的代碼之后，就跳不動了。

總算結束了，每次去查捕獲和冒泡的資料都發現會附帶著preventDefault，也是懵了。一開始我以為preventEvent是阻止捕獲的，stopPropagation是阻止冒泡的，后來發現其實壓根就不是這樣，也是我看的不仔細啊。唉，路還長著，繼續，前行。

GPU云服務器云服務器 js阻止冒泡事件冒泡事件事件冒泡事件冒泡機制

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79746.html

JS 中的事件冒泡與捕獲

摘要：在之前是只支持事件冒泡，包括之后和目前主流的瀏覽器都同時支持兩種事件。中可以用來取消事件冒泡。剛接觸 JS 的那個時候，啥也不懂，只想著如何利用 Google、百度到的函數來解決實際的問題，不會想到去一探究竟。漸漸的，對 JS 的語言的不斷深入，有機會去了解一些原理性東西。最近在看 JQuery 源碼，感觸很多，總想著用原生的 JS 去實現自己的一個 JQuery 庫。說實在的，J...

Rindia 2019-08-20 11:40 評論0 收藏0
原生js之DOM事件相關

摘要：而由于級標準中并沒有定義事件相關的內容，所以事件級別只包括級，級和級三種。此屬性返回當前事件所綁定的對象。自定義事件可以綁定到任意元素上，此處選擇只是為了演示方便。前端學習的東西有很多，現代前端開發，前端工程化的東西要懂，基礎的原生js也要懂，畢竟，框架都是有生命周期的，更替非常快，然而卻有這么一個框架，它是最輕量的前端框架，每個瀏覽器都內置，它叫vanilla.js。好吧，其實va...

learning 2019-08-22 13:51 評論0 收藏0
JS復習-JS中事件的捕獲與冒泡

摘要：也就是說事件流一定是按上面的順序經過這三個階段。關于事件捕獲，事件冒泡的引用場景，有事件委托等。下面引用兩篇文章。什么是捕獲？什么是冒泡？給元素綁定事件會經歷三個階段：一：捕獲階段(capture phase)--先從根元素流向目標元素；二：目標階段(target phase)--在目標元素上的事件被觸發；三：冒泡階段(bubbling phase)--目標元素流向根元素就像你中...

haoguo 2019-08-23 18:37 評論0 收藏0
JS復習-JS中事件的捕獲與冒泡

摘要：也就是說事件流一定是按上面的順序經過這三個階段。關于事件捕獲，事件冒泡的引用場景，有事件委托等。下面引用兩篇文章。什么是捕獲？什么是冒泡？給元素綁定事件會經歷三個階段：一：捕獲階段(capture phase)--先從根元素流向目標元素；二：目標階段(target phase)--在目標元素上的事件被觸發；三：冒泡階段(bubbling phase)--目標元素流向根元素就像你中...

BakerJ 2019-08-02 15:31 評論0 收藏0