JavaScript事件委托實現原理及優點進行
1、什么是事件委托？
事件委托就是利用冒泡的原理，將事件加到 父元素 或 祖先元素上，觸發執行效果。
例：在 document 中綁定 click 事件，當 click 的對象為 按鈕 btn 時，彈框顯示 按鈕 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、事件委托的優點
（1）可以提高 JS 性能
例：在 ul 上創建 100 個 li，點擊每個 li 都要彈框顯示該 li 的 value
傳統寫法：在每個 li 上都綁定 onclick 事件，并觸發 alert 事件
事件委托：在 document 上綁定 onclick 事件，當觸發 onclick 事件后，判斷是不是 <li> 標簽，如果是，則 alert <li> 標簽的值。
（2）可以動態添加 DOM 元素，不需要因為元素的變動而修改事件綁定。
3、事件委托需要注意的地方
事件委托綁定的元素，最好是被監聽元素的父元素，如 <li> 上面的 <ul>、<tr> 上面的 <table> 等。
因為 事件冒泡 的過程也要耗時，越接近頂層，事件的「事件傳播鏈」就越長，也就越耗時。
4、事件冒泡 和 事件捕獲
如圖，事件冒泡是從子元素向父元素傳遞事件，一層一層，事件委托就是利用了冒泡原理；事件捕獲是從 DOM 最高層對象一層一層往子元素傳播。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持好吧啦網。
相關文章：
1. IntelliJ IDEA設置默認瀏覽器的方法2. SpringBoot項目優雅的全局異常處理方式(全網最新)3. Python TestSuite生成測試報告過程解析4. python操作數據庫獲取結果之fetchone和fetchall的區別說明5. IntelliJ IDEA設置背景圖片的方法步驟6. 解決python路徑錯誤,運行.py文件,找不到路徑的問題7. docker /var/lib/docker/aufs/mnt 目錄清理方法8. 在JSP中使用formatNumber控制要顯示的小數位數方法9. 如何清空python的變量10. Xml簡介_動力節點Java學院整理
網公網安備