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

AprilJ 發(fā)布于2019-08-19 18:25 / 1453人閱讀

摘要：二事件委托機(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)聽(tīng)函數(shù)→冒泡，在捕獲和冒泡階段，會(huì)依次檢查途徑的每個(gè)節(jié)點(diǎn)，如果該節(jié)點(diǎn)注冊(cè)了相應(yīng)的監(jiān)聽(tīng)函數(shù)，則執(zhí)行監(jiān)聽(tīng)函數(shù)。以下面的HTML結(jié)構(gòu)為例：


       父親
       孩子

　　執(zhí)行的流程應(yīng)該是這樣的：

　　下面是一組例子，分別點(diǎn)擊孩子節(jié)點(diǎn)可以清楚的看到第三個(gè)參數(shù)的影響：

父親

孩子

父親節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)在捕獲階段執(zhí)行：

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

父親

孩子
父親節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)在冒泡階段執(zhí)行：

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

父親

孩子

父親節(jié)點(diǎn)的監(jiān)聽(tīng)函數(shù)在捕獲冒泡階段都執(zhí)行：

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

　　如果不想讓事件向上冒泡，可以在監(jiān)聽(tīng)函數(shù)中調(diào)用event.stopPrapagation()來(lái)完成，這樣父親節(jié)點(diǎn)就捕捉不到該事件了。在實(shí)際的開(kāi)發(fā)中，這一用處還是挺多的。

二、事件委托機(jī)制

?????? 知道了事件的捕獲冒泡機(jī)制，我們可以利用它來(lái)實(shí)現(xiàn)更方便的程序控制，事件委托便是最典型的應(yīng)用之一。下面來(lái)說(shuō)說(shuō)javascript中的事件委托機(jī)制。什么叫委托呢？想想我們現(xiàn)實(shí)生活中，自己不想干的事，讓別人來(lái)幫忙完成，這就是把事情“委托”給別人。Javascript的事件委托機(jī)制也是這個(gè)道理，本來(lái)一個(gè)監(jiān)聽(tīng)函數(shù)要處理節(jié)點(diǎn)a觸發(fā)的事件，現(xiàn)在把這個(gè)監(jiān)聽(tīng)函數(shù)綁定到節(jié)點(diǎn)a的父層節(jié)點(diǎn)上，讓它的父輩來(lái)完成事件的監(jiān)聽(tīng)，這樣就把事情“委托”了過(guò)去。在父輩元素的監(jiān)聽(tīng)函數(shù)中，可通過(guò)event.target屬性拿到觸發(fā)事件的原始元素，然后再對(duì)其進(jìn)行相關(guān)處理。

?????? 那這樣做有什么好處呢？最大的用處便是監(jiān)聽(tīng)動(dòng)態(tài)增加的元素。比如我們現(xiàn)在有這樣的需求，點(diǎn)擊下面每個(gè)列表項(xiàng)彈出各自的內(nèi)容，現(xiàn)在隨著web應(yīng)用的盛行，網(wǎng)頁(yè)中使用異步請(qǐng)求來(lái)動(dòng)態(tài)加載節(jié)點(diǎn)已經(jīng)變的很普遍，所以我們點(diǎn)擊下方的按鈕要在列表中增加一項(xiàng)，并且點(diǎn)擊新增加的節(jié)點(diǎn)也要彈出內(nèi)容。HTML結(jié)構(gòu)如下：


    列表內(nèi)容1
    列表內(nèi)容2
    列表內(nèi)容3
    列表內(nèi)容4
    列表內(nèi)容5

　　若我們使用之前的監(jiān)聽(tīng)器綁定方式，需要遍歷所有的li元素并監(jiān)聽(tīng)，代碼應(yīng)該是這樣的：

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

列表內(nèi)容1

列表內(nèi)容2

列表內(nèi)容3

列表內(nèi)容4

列表內(nèi)容5


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

列表內(nèi)容1

列表內(nèi)容2

列表內(nèi)容3

列表內(nèi)容4

列表內(nèi)容5


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

GPU云服務(wù)器云服務(wù)器事件冒泡機(jī)制事件機(jī)制事件注冊(cè)機(jī)制 extjs 事件機(jī)制

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

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

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

AprilJ

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

基于web接口的自動(dòng)化測(cè)試選型

閱讀 1329·2021-11-16 11:44
SpartanHost(斯巴達(dá))，西雅圖vps8折優(yōu)惠，三網(wǎng)聯(lián)通4837，$3.5/月，1核/512

閱讀 3793·2021-10-09 10:01
10g.biz，美國(guó)多IP站群獨(dú)立服務(wù)器，9折促銷(xiāo)，低至$260/月，253個(gè)IP，不限流量

閱讀 1789·2021-09-24 10:31
【C語(yǔ)言進(jìn)階學(xué)習(xí)】一、數(shù)據(jù)的存儲(chǔ) (深度剖析數(shù)據(jù)在內(nèi)存中的存儲(chǔ))

閱讀 3903·2021-09-04 16:41
OneTechCloud易科云暑期活動(dòng)：全場(chǎng)VPS月付9折季付8折，香港cn2/美國(guó)cn2 gia

閱讀 2545·2021-08-09 13:45
前端面試題-文本溢出顯示省略號(hào)（...）

閱讀 1244·2019-08-30 14:08
webpack插件 - css主題顏色提取-主題切換

閱讀 1820·2019-08-29 18:32
JavaScript 之面向?qū)ο?[ Function類(lèi)型 ]

閱讀 1667·2019-08-26 12:12

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

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

簡(jiǎn)單聊聊瀏覽器JS事件觸發(fā)機(jī)制

JS專(zhuān)題之事件模型

淺談事件委托機(jī)制

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

發(fā)表評(píng)論

0條評(píng)論

AprilJ

男|高級(jí)講師

TA的文章

基于web接口的自動(dòng)化測(cè)試選型

SpartanHost(斯巴達(dá))，西雅圖vps8折優(yōu)惠，三網(wǎng)聯(lián)通4837，$3.5/月，1核/512

10g.biz，美國(guó)多IP站群獨(dú)立服務(wù)器，9折促銷(xiāo)，低至$260/月，253個(gè)IP，不限流量

【C語(yǔ)言進(jìn)階學(xué)習(xí)】一、數(shù)據(jù)的存儲(chǔ) (深度剖析數(shù)據(jù)在內(nèi)存中的存儲(chǔ))

OneTechCloud易科云暑期活動(dòng)：全場(chǎng)VPS月付9折季付8折，香港cn2/美國(guó)cn2 gia

前端面試題-文本溢出顯示省略號(hào)（...）

webpack插件 - css主題顏色提取-主題切換

JavaScript 之面向?qū)ο?[ Function類(lèi)型 ]

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

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

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！