在javascript中,事件委託就是利用冒泡的原理,將事件加到父元素或祖先元素上,觸發執行效果。事件委託的優點:1、可以提高JS效能;2、可以動態加入DOM元素,不需要因為元素的變動而修改事件綁定。
本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。
1、什麼是事件委託?
事件委託就是利用冒泡的原理,將事件加到 父元素 或 祖先元素上,觸發執行效果。
範例:在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、事件委託的優點
(1)可以提高JS 效能
範例:在ul 上創建100 個li,點選每個li 都要彈框顯示該li 的value
傳統寫法:在每個li 上都綁定onclick 事件,並觸發alert 事件
事件委託:在document 上綁定onclick 事件,當觸發onclick 事件後,判斷是不是
(2)可以動態加入 DOM 元素,不需要因為元素的變動而修改事件綁定。
3、事件委託需要注意的地方
#事件委託綁定的元素,最好是被監聽元素的父元素,如
以上是javascript事件委託是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章!