JavaScript事件委托實(shí)現(xiàn)原理及優(yōu)點(diǎn)進(jìn)行
1、什么是事件委托？
事件委托就是利用冒泡的原理，將事件加到 父元素 或 祖先元素上，觸發(fā)執(zhí)行效果。
例：在 document 中綁定 click 事件，當(dāng) click 的對(duì)象為 按鈕 btn 時(shí)，彈框顯示 按鈕 btn的值
<body><button value='嘿嘿'>哈哈</button><script> window.onload=function () { let btn=document.getElementById('btn') document.onclick=function (e) { // console.log(e.target) if(e.target===btn){ alert(btn.value) } } }</script></body>
2、事件委托的優(yōu)點(diǎn)
（1）可以提高 JS 性能
例：在 ul 上創(chuàng)建 100 個(gè) li，點(diǎn)擊每個(gè) li 都要彈框顯示該 li 的 value
傳統(tǒng)寫(xiě)法：在每個(gè) li 上都綁定 onclick 事件，并觸發(fā) alert 事件
事件委托：在 document 上綁定 onclick 事件，當(dāng)觸發(fā) onclick 事件后，判斷是不是 <li> 標(biāo)簽，如果是，則 alert <li> 標(biāo)簽的值。
（2）可以動(dòng)態(tài)添加 DOM 元素，不需要因?yàn)樵氐淖儎?dòng)而修改事件綁定。
3、事件委托需要注意的地方
事件委托綁定的元素，最好是被監(jiān)聽(tīng)元素的父元素，如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。
因?yàn)?事件冒泡 的過(guò)程也要耗時(shí)，越接近頂層，事件的「事件傳播鏈」就越長(zhǎng)，也就越耗時(shí)。
4、事件冒泡 和 事件捕獲
如圖，事件冒泡是從子元素向父元素傳遞事件，一層一層，事件委托就是利用了冒泡原理；事件捕獲是從 DOM 最高層對(duì)象一層一層往子元素傳播。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. ASP新手必備的基礎(chǔ)知識(shí)2. asp文件用什么軟件編輯3. Docker 啟動(dòng)Redis 并設(shè)置密碼的操作4. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建（ Postfix ）5. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象6. JS中6個(gè)對(duì)象數(shù)組去重的方法7. vue+element開(kāi)發(fā)一個(gè)谷歌插件的全過(guò)程8. Vue axios獲取token臨時(shí)令牌封裝案例9. 通過(guò)IEAD+Maven快速搭建SSM項(xiàng)目的過(guò)程(Spring + Spring MVC + Mybatis)10. 利用CSS制作3D動(dòng)畫(huà)
網(wǎng)公網(wǎng)安備