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

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

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

概念

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

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

至于說(shuō)事件委托和冒泡機(jī)制的關(guān)系，按照我的理解，事件委托知識(shí)一種描述性的概念，二冒泡機(jī)制才是一種具體的實(shí)現(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)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/85609.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

enrecul101 2019-08-23 15:35 評(píng)論0 收藏0