事件冒泡 和事 件捕獲

拜讀鏈接: https://www.cnblogs.com/linxuehan/p/3623760.html

??閑來(lái)無(wú)聊，看看面試題，突然看到事件冒泡和事件捕獲，腦袋中有點(diǎn)印象，卻不知如何描述。。。。。。拜讀了一些大佬的博客略微有所了解。記錄一下方便以后自己查閱。

??其實(shí)沒(méi)那么高大上，只是dom接收事件時(shí)序差異的術(shù)語(yǔ)而已。事件冒泡，就是從target元素，層層向外傳遞，直至document為止。事件捕獲就是從document元素開(kāi)始層層向內(nèi)傳遞直到target為止。

??常規(guī)瀏覽器默認(rèn)的是事件冒泡機(jī)制。ie8及以下使用的是事件捕獲機(jī)制。

示例

<div id="parent">父親<div id="child">孩子<div><div> 復(fù)制代碼 <script>document.getElementById('parent').addEventListener('click',function(e){console.log(this.id);});document.getElementById('child').addEventListener('click',function(e){console.log(this.id);});</script> 復(fù)制代碼

先打印child，然后打印parent，因?yàn)槠胀g覽器為事件冒泡，所以先觸發(fā)child，然后觸發(fā)parent。事件綁定的第三個(gè)參數(shù)可以修改事件流機(jī)制

<script>document.getElementById('parent').addEventListener('click',function(e){console.log(this.id);}, true);document.getElementById('child').addEventListener('click',function(e){console.log(this.id);}, true);</script> 復(fù)制代碼

執(zhí)行結(jié)果parent，child。

拿啥是事件代理（事件委托）呢？。。。。。。。。

??事件委托其實(shí)就是利用事件冒泡原理，指定一個(gè)事件處理程序，就可以管理一類事件。

經(jīng)典示例（被各大佬客引用）

??有三個(gè)同事預(yù)計(jì)會(huì)在周一收到快遞。為簽收快遞，有兩種辦法：一是三個(gè)人在公司門口等快遞；二是委托給前臺(tái)MM代為簽收。現(xiàn)實(shí)當(dāng)中，我們大都采用委托的方案（公司也不會(huì)容忍那么多員工站在門口就為了等快遞）。前臺(tái)MM收到快遞后，她會(huì)判斷收件人是誰(shuí)，然后按照收件人的要求簽收，甚至代為付款。這種方案還有一個(gè)優(yōu)勢(shì)，那就是即使公司里來(lái)了新員工（不管多少），前臺(tái)MM也會(huì)在收到寄給新員工的快遞后核實(shí)并代為簽收。

示例

目標(biāo)實(shí)現(xiàn)點(diǎn)擊每個(gè)li彈出對(duì)應(yīng)人的名字。

<ul><li>張三</li><li>李四</li><li>王五</li><ul> 復(fù)制代碼

之前一直這樣干。。。。。。。。

<script>$('li').on('cilck',function(e){alert(e.target.innerText);})</script> 復(fù)制代碼

了解事件委托后。。。。。。。。

<script>$('ul').on('cilck',function(e) {// 如果li里還有其它子元素還需處理，暫時(shí)不考慮if(e.target.nodeName.toLowerCase() == 'li') {alert(e.target.innerText); }})</script> 復(fù)制代碼

感覺(jué)這樣寫也沒(méi)有啥，代碼還更多了。。。。。。仔細(xì)看你就會(huì)發(fā)現(xiàn)，我們少了循環(huán)li的操作，前端最耗性能的是dom操作，如果有100個(gè)li那就太可怕了。所以我們把事件委托給ul，每個(gè)li點(diǎn)擊的時(shí)候都會(huì)冒泡到ul觸發(fā)事件。而且這樣做還有一個(gè)好處，動(dòng)態(tài)追加的li元素也會(huì)觸發(fā)點(diǎn)擊事件。如果按之前的給每個(gè)li綁定事件，那新追加的是沒(méi)有事件的。事件委托將事件放到j(luò)s處理程序中，從而大大提高了頁(yè)面的性能。

轉(zhuǎn)載于:https://juejin.im/post/5b5988c96fb9a04faf47b331

總結(jié)

以上是生活随笔為你收集整理的事件冒泡和事件捕获的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。