事件委托和冒泡機(jī)制

warmcheng 發(fā)布于2019-08-21 10:29 / 2331人閱讀

摘要：概念事件委托，就是某個事件本來該自己干的，但是自己不干，交給別人來干。冒泡機(jī)制，就是父節(jié)點(diǎn)監(jiān)控著一塊區(qū)域的點(diǎn)擊事件，當(dāng)點(diǎn)擊事件觸發(fā)時，會根據(jù)坐標(biāo)來判斷是哪一塊區(qū)域被點(diǎn)擊，然后確定事件對象的屬性或者說是屬性。

概念

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

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

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

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云服務(wù)器云服務(wù)器事件冒泡機(jī)制委托事件事件委托冒泡事件

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/85609.html

相關(guān)文章

事件委托和冒泡機(jī)制有關(guān)系嗎？

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

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

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

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

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

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

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

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

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

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