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

1、冒泡和捕獲

事件執行：子元素在執行某個事件的先後，會引發上層元素觸發相同事件。例：我點擊了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區域，先捕獲，後冒泡

2、阻止冒泡和捕獲

IE和Netscape的阻止方式

• IE：event.stopPropagation()

• Netscape：e.cancelBubble = true;

（一）阻止冒泡

一樣點擊t2區域，能夠見到t3的click事件就不會被觸發了。

（二）阻止捕獲

一樣點擊t2區域，能夠見到t2的click事件沒有被觸發。由於咱們在觸發t3的時候，讓捕獲中止了，那樣t2也就接受不到要觸發click的消息了，也就over了。

3、補充

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

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

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

但加了下面的代碼以後，就跳不動了。

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