溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例分析了JavaScript事件委托原理與用法。分享給大家供大家參考，具體如下：
在日常中，我們可能會聽到事件委托這樣的概念，有些同學可能對事件委托已經很了解了，也有些同學可能只是聽過事件委托，只是會簡單的使用，但是對于事件委托的原理不怎么知道。所以該博文會解釋一下原生js的事件委托的原理，為什么會有事件委托，為什么可以這樣用事件委托等等問題。
1. js中的事件流
在解析事件委托之前，我們先回顧一下js中的事件流，即冒泡和捕獲。
① .冒泡：當下級節點觸發某個事件的時候，該事件會逐級向上觸發上級節點的同類事件。
② .捕獲：和冒泡類似，只不過事件的順序相反。即是從上級節點傳遞到下級節點
2. 事件委托原理
事件委托就是基于js的事件流產生的，事件委托是利用事件冒泡，將事件加在父元素或者祖先元素上，觸發該事件。
<body>
<div id="myDiv">
<input type="button" value="按鈕1" id="btn1">
<input type="button" value="按鈕2" id="btn2">
<input type="button" value="按鈕3" id="btn3">
</div>
</body>
<script type="text/javascript">
document.getElementById("myDiv").onclick=function(e){
e=window.event||e;
var btnId=e.target.id;
switch(btnId){
case "btn1":
console.log("按鈕1");
break;
case "btn2":
console.log("按鈕2");
break;
case "btn3":
console.log("按鈕3");
break;
}
}
</script>
上面的代碼就是一個典型的事件委托案例。利用的原理就是事件冒泡，將事件加載父元素上，通過event參數來區別按鈕的不同
3. 總結
通過對上面事件委托代碼的觀察，我們可以很容易得出事件委托的好處：
① .減少頁面綁定事件數量，由于頁面事件綁定數量越多，頁面執行性能越差，所以事件委托可以提高頁面的性能
② .事件委托可以靈活的處理子節點動態變化的場景，無論子節點增加還是減少，事件都無需重新綁定
PS：關于javascript事件說明可參考本站javascript事件與功能說明大全：http://tools.jb51.net/table/javascript_event
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
