JavaScript捕獲和冒泡探討

caikeal 發布于2019-08-19 18:09 / 1207人閱讀

摘要：上個星期在微博中一個關于捕獲和冒泡代碼的討論，可能沒有動手實現一篇的人無法給出確定的答案。目標階段事件對象到達其事件目標。在此階段注冊的事件監聽器會對相應的冒泡事件進行處理。

上個星期在微博中一個關于javascript捕獲和冒泡代碼的討論，可能沒有動手實現一篇的人無法給出確定的答案。

這里再來回顧一下之前的三條微博。

事件的執行順序

JavaScript冒泡和捕獲考察題目看圖回答問題，晚上公布答案。

問：點擊Li，JS的執行順序是什么？

JavaScript捕獲和冒泡探討

總結就是：先捕獲，后冒泡，捕獲從上到下，冒泡從下到上（形象點說法：捕獲像石頭沉入海底，冒泡則像氣泡冒出水面）

問：假如去掉注釋 event.stopPropagation(); 結果又會輸出什么？

答：去掉event.stopPropagation()
之后，由于事件有捕獲和冒泡時先執行捕獲，捕獲到div之后，事件被阻止，后面就不在繼續傳播了。所以只輸出divcallback.

在上面的代碼如果增加一個div.addEventListener("click",callbackdiv2,false);

則div先執行捕獲，接著執行上面這句冒泡，所以微博里的一個朋友評論說事件執行過捕獲就不會執行冒泡其實是不對的。

div.addEventListener("click",callbackdiv,true);這一句只能是捕獲才執行。

以上代碼代碼：演示

事件不同瀏覽器處理函數

element.addEventListener(type, listener[, useCapture]); // IE6~8不支持（捕獲和冒泡通過useCapture,默認false）
element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持(只執行冒泡事件)
element[’on’ + type] = function(){} // 所有瀏覽器（默認執行冒泡事件）

JavaScript捕獲和冒泡探討

W3C規范中定義了3個事件階段，依次是捕獲階段、目標階段、冒泡階段。事件對象按照上圖的傳播路徑依次完成這些階段。如果某個階段不支持或事件對象的傳播被終止，那么該階段就會被跳過。舉個例子，如果Event.bubbles屬性被設置為false，那么冒泡階段就會被跳過。如果Event.stopPropagation()在事件派發前被調用，那么所有的階段都會被跳過。

捕獲階段：

在事件對象到達事件目標之前，事件對象必須從window經過目標的祖先節點傳播到事件目標。這個階段被我們稱之為捕獲階段。在這個階段注冊的事件監聽器在事件到達其目標前必須先處理事件。

目標階段：

事件對象到達其事件目標。這個階段被我們稱為目標階段。一旦事件對象到達事件目標，該階段的事件監聽器就要對它進行處理。如果一個事件對象類型被標志為不能冒泡。那么對應的事件對象在到達此階段時就會終止傳播。

冒泡階段：

事件對象以一個與捕獲階段相反的方向從事件目標傳播經過其祖先節點傳播到window。這個階段被稱之為冒泡階段。在此階段注冊的事件監聽器會對相應的冒泡事件進行處理。

在一個事件完成了所有階段的傳播路徑后，它的Event.currentTarget會被設置為null并且Event.eventPhase會被設為0。Event的所有其他屬性都不會改變（包括指向事件目標的Event.target屬性）.

跨瀏覽器的事件處理函數：

var EventUtil = {
  addHandler: function(element, type, handler) {
    if (element.addEventListener) {  // DOM2
      element.addEventListener(type, handler, false);
    } else if (element.attachEvent) {  // IE
      element.attachEvent("on" + type, handler);
    } else {  // DOM0
      element["on" + type] = handler;
    }
  },

  removeHandler: function(element, type, handler) {
    if (element.removeEventListener) {
      element.removeEventListener(type, handler, false);
    } else if (element.detachEvent) {
      element.detachEvent("on" + type, handler);
    } else {
      element["on" + type] = null;
    }
  }
};

跨瀏覽器的事件對象：

var EventUtil = {
  getEvent: function(e) {
    return e ? e : window.e;
  },

  getTarget: function(e) {
    return e.target || e.srcElement;
  },

  preventDefault: function(e) {
    if (e.preventDefault) {
      e.preventDefault();
    } else {
      e.returnValue = false;
    }
  },

  stopPropagation: function(e) {
    if (e.stopPropagation) {
      e.stopPropagation()
    } else {
      e.cancelBubble = true;
    }
  }
}

可以看我之前寫過的一篇文章：如何停止冒泡和阻止默認行為

ps:半個月沒發文章，因為我最近在搞這個：開發頭條網，然后我發現這個東西做好和做壞根本沒有出路，我考慮要不要下掉，嗚嗚……，請賜予我動力吧。

云服務器 GPU云服務器冒泡和選擇c語言數據分析的探討 javascript和html php和javascript

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

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

「前端面試題系列7」Javascript 中的事件機制（從原生到框架）

摘要：要想注冊過的事件能夠被解除，必須將回調函數保存起來，否則無法解除。當用阻止瀏覽器的默認行為時，會做下面這件事停止回調函數執行并立即返回。 showImg(https://segmentfault.com/img/bVboOcb?w=750&h=422); 前言這是前端面試題系列的第 7 篇，你可能錯過了前面的篇章，可以在這里找到：理解函數的柯里化 ES6 中箭頭函數的用法 thi...

Tony 2019-08-23 15:26 評論0 收藏0
【譯】JavaScript面試問題：事件委托和this

摘要：主題來自于的典型面試問題列表。有多種方法來處理事件委托。這種方法的缺點是父容器的偵聽器可能需要檢查事件來選擇正確的操作，而元素本身不會是一個監聽器。 showImg(http://fw008950-flywheel.netdna-ssl.com/wp-content/uploads/2014/11/Get-Hired-Fast-How-to-Job-Search-Classifieds...

浠ラ箍 2019-08-21 10:32 評論0 收藏0
JS DOM Event

摘要：事件處理程序事件偵聽器的設定級級首先講級事件處理程序對事件的方式被稱為事件處理程序或事件偵聽器，但這兩者之間是有區別的。此外，不能對事件目標事件類型執行階段都相同的對象注冊多個相同的事件偵聽器。關于這一篇章有太多對于我來說雜且亂的知識點，單單是分別DOM層級劃分我看過的文章就有（0,2,3）的，（0,2）的，由于自己知識掌握還很薄弱所以只能參考別人文章結合自己理解來寫，這其中也涉及到...

WelliJhon 2019-08-20 16:46 評論0 收藏0
javascript -- 事件--事件流-- 冒泡 --捕獲

摘要：在內聯模型中，事件處理函數是標簽的一個屬性，用于處理指定事件。事件捕獲與冒泡原理圖事件流同時支持兩種事件模型捕獲型事件和冒泡型事件，但是，捕獲型事件先發生。 javascript -- 事件事件是js和用戶操作交互的橋梁, JavaScript 有三種事件模型：內聯模型、腳本模型和 DOM2 模型內聯模型這種模型是最傳統接單的一種處理事件的方法。在內聯模型中，事件處理函數是 HT...

leeon 2019-08-26 11:38 評論0 收藏0