本文實例分析了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.Vevb.com/table/javascript_event
更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript事件相關操作與技巧大全》、《JavaScript頁面元素操作技巧總結》、《JavaScript操作DOM技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript錯誤與調試技巧總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
圖片精選
