欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript事件委托實現(xiàn)原理及優(yōu)點進行

 更新時間：2020年08月29日 16:33:43   作者：八英里  
這篇文章主要介紹了JavaScript事件委托實現(xiàn)原理及優(yōu)點進行,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下

1、什么是事件委托？

事件委托就是利用冒泡的原理，將事件加到 父元素 或 祖先元素上，觸發(fā)執(zhí)行效果。

例：在 document 中綁定 click 事件，當 click 的對象為 按鈕 btn 時，彈框顯示 按鈕 btn的值

<body>
<button id="btn" 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)點

（1）可以提高 JS 性能

例：在 ul 上創(chuàng)建 100 個 li，點擊每個 li 都要彈框顯示該 li 的 value

傳統(tǒng)寫法：在每個 li 上都綁定 onclick 事件，并觸發(fā) alert 事件

事件委托：在 document 上綁定 onclick 事件，當觸發(fā) onclick 事件后，判斷是不是 <li> 標簽，如果是，則 alert <li> 標簽的值。

（2）可以動態(tài)添加 DOM 元素，不需要因為元素的變動而修改事件綁定。

3、事件委托需要注意的地方

事件委托綁定的元素，最好是被監(jiān)聽元素的父元素，如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。

因為 事件冒泡 的過程也要耗時，越接近頂層，事件的「事件傳播鏈」就越長，也就越耗時。

4、事件冒泡 和 事件捕獲

如圖，事件冒泡是從子元素向父元素傳遞事件，一層一層，事件委托就是利用了冒泡原理；事件捕獲是從 DOM 最高層對象一層一層往子元素傳播。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

相關文章

最新評論