事件冒泡 和事 件捕獲

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

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

??其實沒那么高大上，只是dom接收事件時序差異的術語而已。事件冒泡，就是從target元素，層層向外傳遞，直至document為止。事件捕獲就是從document元素開始層層向內傳遞直到target為止。

??常規瀏覽器默認的是事件冒泡機制。ie8及以下使用的是事件捕獲機制。

示例

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

先打印child，然后打印parent，因為普通瀏覽器為事件冒泡，所以先觸發child，然后觸發parent。事件綁定的第三個參數可以修改事件流機制

<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> 復制代碼

執行結果parent，child。

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

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

經典示例（被各大佬客引用）

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

示例

目標實現點擊每個li彈出對應人的名字。

<ul><li>張三</li><li>李四</li><li>王五</li><ul> 復制代碼

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

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

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

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

感覺這樣寫也沒有啥，代碼還更多了。。。。。。仔細看你就會發現，我們少了循環li的操作，前端最耗性能的是dom操作，如果有100個li那就太可怕了。所以我們把事件委托給ul，每個li點擊的時候都會冒泡到ul觸發事件。而且這樣做還有一個好處，動態追加的li元素也會觸發點擊事件。如果按之前的給每個li綁定事件，那新追加的是沒有事件的。事件委托將事件放到js處理程序中，從而大大提高了頁面的性能。

轉載于:https://juejin.im/post/5b5988c96fb9a04faf47b331

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。