事件委托和冒泡機制

warmcheng 發布于2019-08-21 10:29 / 2323人閱讀

摘要：概念事件委托，就是某個事件本來該自己干的，但是自己不干，交給別人來干。冒泡機制，就是父節點監控著一塊區域的點擊事件，當點擊事件觸發時，會根據坐標來判斷是哪一塊區域被點擊，然后確定事件對象的屬性或者說是屬性。

概念

事件委托，就是某個事件本來該自己干的，但是自己不干，交給別人來干。就叫事件委托。打個比方：一個button對象，本來自己需要監控自身的點擊事件，但是自己不來監控這個點擊事件，讓自己的父節點來監控自己的點擊事件。

冒泡機制，就是父節點監控著一塊區域的點擊事件，當點擊事件觸發時，會根據坐標來判斷是哪一塊區域被點擊，然后確定事件對象的target屬性或者說是srcelement屬性。確定好了之后，這個事件對象，會往上一層一層的傳遞，如果當前的事件調用了stopPropagation();那么事件將會停留在這一層，也就是說，事件將不會被之上的層進行監控了

至于說事件委托和冒泡機制的關系，按照我的理解，事件委托知識一種描述性的概念，二冒泡機制才是一種具體的實現方式。

var toolbar = document.querySelector(".toolbar");
toolbar.addEventListener("click", function(e) {
 var button = e.target;//e就表示事件
 if(!button.classList.contains("active"))
  button.classList.add("active");
 else
  button.classList.remove("active");
});

GPU云服務器云服務器事件冒泡機制委托事件事件委托冒泡事件

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

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

事件委托和冒泡機制有關系嗎？

摘要：等等，挺在這里，雖然不僅一篇文章闡述了事件委托是利用了冒泡機制，得益于冒泡機制，但是，怎么得益的，怎么利用的。事件委托和冒泡機制有關系嗎接下來我想引出本文的重點事件委托和冒泡機制有關系嗎我認為就算有關系，關系也不大。面試官提出的問題我們在面試前端的過程中，經常會聽到面試官問這樣的問題：如果我有一個頁面，里面1000個元素都要綁定click事件，請問你要怎么做如果你...

joywek 2019-08-26 14:07 評論0 收藏0
事件冒泡機制與委托機制

摘要：二事件委托機制知道了事件的捕獲冒泡機制，我們可以利用它來實現更方便的程序控制，事件委托便是最典型的應用之一。下面來說說中的事件委托機制。一、事件的捕獲與冒泡 ?? 由W3C規定的DOM2標準中，一次事件的完整過程包括三步：捕獲→執行目標元素的監聽函數→冒泡，在捕獲和冒泡階段，會依次檢查途徑的每個節點，如果該節點注冊了相應的監聽函數，則執行監聽函數。以下面的HTML結構為例： ...

AprilJ 2019-08-19 18:25 評論0 收藏0
淺談事件委托機制

摘要：所謂的事件委托，簡單的來說就是將一個元素響應事件委托給另外一個元素。而正好瀏覽器當中有事件冒泡機制，一張圖簡單了解下瀏覽器的事件響應機制。適用場景在日常開發過程中，我們經常會遇到這樣一種場景：我需要通過ajax從后端獲取數據后動態添加dom節點來展示數據，并且這些dom節點有時候又需要是可交互的，例如點擊事件。那么在我們獲取到數據之前這些dom節點是不存在的，也就是說我們沒辦法在獲...

WelliJhon 2019-08-22 15:14 評論0 收藏0
JS專題之事件模型

摘要：三事件流規定事件包括三個階段，事件捕獲，處于目標階段事件冒泡。一起來看添加新增加的，點擊發現沒有反應，說明事件沒有綁定進去，但是我們也并不想，每增加一個新元素，就為這個新元素綁定事件，重復低效率的工作應當避免去做。本文共 1960 字，讀完只需 8 分鐘事件用戶與網頁交互是通過事件實現的，事件剛開始是作為分擔服務器負載的一個手段，起初沒有統一的規范，直到 DOM2 級，網景和 I...

W4n9Hu1 2019-08-26 13:24 評論0 收藏0
簡單聊聊瀏覽器JS事件觸發機制

摘要：事件冒泡由微軟提出，事件會從最內從的元素開始發生，再向外傳播，正好與事件捕獲相反。為了解決上述問題，我們可以利用事件委托的思想，在父級注冊一個事件監聽器，統一進行子元素的事件處理。原理事件捕獲由網景最先提出，事件會從最外層開始發生，直到最具體的元素，也就是說假如父元素與子元素都綁定有點擊事件，又互相重疊，那么先出發的會是父元素的事件，然后再傳遞到子元素。事件冒泡由微軟提出，事...

enrecul101 2019-08-23 15:35 評論0 收藏0