事件冒泡機制與委托機制

AprilJ 發布于2019-08-19 18:25 / 1421人閱讀

摘要：二事件委托機制知道了事件的捕獲冒泡機制，我們可以利用它來實現更方便的程序控制，事件委托便是最典型的應用之一。下面來說說中的事件委托機制。

一、事件的捕獲與冒泡

?? 由W3C規定的DOM2標準中，一次事件的完整過程包括三步：捕獲→執行目標元素的監聽函數→冒泡，在捕獲和冒泡階段，會依次檢查途徑的每個節點，如果該節點注冊了相應的監聽函數，則執行監聽函數。以下面的HTML結構為例：


       父親
       孩子

　　執行的流程應該是這樣的：

　　下面是一組例子，分別點擊孩子節點可以清楚的看到第三個參數的影響：

父親

孩子

父親節點的監聽函數在捕獲階段執行：

var parent1 = document.getElementById(‘parentdiv1′);
var child1 = document.getElementById(‘childdiv1′);
parent.addEventListener(‘click’,function(){alert(‘父親被點擊了’);},true);//第三個參數為true
child.addEventListener(‘click’,function(){alert(‘孩子被點擊了’);},false);

父親

孩子
父親節點的監聽函數在冒泡階段執行：

var parent2 = document.getElementById(‘parentdiv2′);
var child2 = document.getElementById(‘childdiv2′);
parent.addEventListener(‘click’,function(){alert(‘父親被點擊了’);},false);//第三個參數為false
child.addEventListener(‘click’,function(){alert(‘孩子被點擊了’);},false);

父親

孩子

父親節點的監聽函數在捕獲冒泡階段都執行：

var child3 = document.getElementById(‘childdiv3′);
parent.addEventListener(‘click’,function(){alert(‘父親被點擊了’);},true);//第三個參數為true
parent.addEventListener(‘click’,function(){alert(‘父親被點擊了’);},false);//第三個參數為false
child.addEventListener(‘click’,function(){alert(‘孩子被點擊了’);},false);

　　如果不想讓事件向上冒泡，可以在監聽函數中調用event.stopPrapagation()來完成，這樣父親節點就捕捉不到該事件了。在實際的開發中，這一用處還是挺多的。

二、事件委托機制

?????? 知道了事件的捕獲冒泡機制，我們可以利用它來實現更方便的程序控制，事件委托便是最典型的應用之一。下面來說說javascript中的事件委托機制。什么叫委托呢？想想我們現實生活中，自己不想干的事，讓別人來幫忙完成，這就是把事情“委托”給別人。Javascript的事件委托機制也是這個道理，本來一個監聽函數要處理節點a觸發的事件，現在把這個監聽函數綁定到節點a的父層節點上，讓它的父輩來完成事件的監聽，這樣就把事情“委托”了過去。在父輩元素的監聽函數中，可通過event.target屬性拿到觸發事件的原始元素，然后再對其進行相關處理。

?????? 那這樣做有什么好處呢？最大的用處便是監聽動態增加的元素。比如我們現在有這樣的需求，點擊下面每個列表項彈出各自的內容，現在隨著web應用的盛行，網頁中使用異步請求來動態加載節點已經變的很普遍，所以我們點擊下方的按鈕要在列表中增加一項，并且點擊新增加的節點也要彈出內容。HTML結構如下：


    列表內容1
    列表內容2
    列表內容3
    列表內容4
    列表內容5

　　若我們使用之前的監聽器綁定方式，需要遍歷所有的li元素并監聽，代碼應該是這樣的：

var listArray = document.getElementById("olist").childNodes;
for(var i=0;i
　　運行效果如下：

列表內容1

列表內容2

列表內容3

列表內容4

列表內容5


　　可以發現當新增元素后，點擊它并沒有彈出內容。那是當然的了，因為我們并沒有給新增的元素綁定監聽器，為了實現點擊新增元素也彈出內容，我們不得不在每次新增一個元素后，再進行一次綁定。加一個綁一個，加一個綁一個，累不累啊！你不累瀏覽器都累了！這樣做導致的性能開銷是可想而知的，而且瀏覽器還要維系n多元素與應的監聽函數的映射關系，會占用大量內存。
?????? 面對這樣拖沓冗雜的代碼，你是不是已經不能忍，來看看使用事件委托的效果，代碼如下：
var olist = document.getElementById("olist");
olist.addEventListener("click",function(){
    alert(event.target.innerText);
},false);
　　看看實際運行的效果：

列表內容1

列表內容2

列表內容3

列表內容4

列表內容5


　　我們并未給li元素綁定任何監聽器，而是監聽它的父元素ul，等到事件冒泡上來的時候，在處理函數中通過event.target獲得觸發事件的li元素，進行相關處理。這樣做的好處是顯而易見的，首先只進行了一次監聽器的綁定，瀏覽器輕松，其次動態增加元素后你也不必要再綁定監聽器，你也輕松。正所謂大家好才是真的好！
?????? 本篇的基本內容就介紹完了，你是不是感覺有點奇妙，我平時寫程序的時候沒關心這些也仍然能完成工作呀？那我就得問你是不是使用js框架，使用jQuery了，事實上，jQuery提供的on、live等方法就已經對事件委托進行了封裝，為委托機制的推廣悄悄做了底層貢獻，你沒感覺到而已。jQuery中的各種事件監聽方式也需要我們有一個清楚的了解，才能正確的使用，高效的完成工作。這些內容將放在下一篇介紹。

GPU云服務器云服務器事件冒泡機制事件機制事件注冊機制 extjs 事件機制

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

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

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

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

joywek 2019-08-26 14:07 評論0 收藏0
簡單聊聊瀏覽器JS事件觸發機制

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

enrecul101 2019-08-23 15:35 評論0 收藏0
JS專題之事件模型

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

W4n9Hu1 2019-08-26 13:24 評論0 收藏0
淺談事件委托機制

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

WelliJhon 2019-08-22 15:14 評論0 收藏0
事件委托和冒泡機制

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

warmcheng 2019-08-21 10:29 評論0 收藏0