JS事件委託使用詳解

這次帶給大家JS事件委託使用詳解，JS事件委託使用的注意事項有哪些，下面就是實戰案例，一起來看一下。

事件委託（也叫事件代理），其實這個問題也簡單，要弄清楚事件委託，我們先要把事件冒泡的機制搞清楚。舉個事件冒泡的例子：

    
• 点击

<script> var ul=document.getElementsByTagName(&#39;ul&#39;)[0]; var li=document.getElementsByTagName(&#39;li&#39;)[0]; ul.addEventListener(&#39;click&#39;, function(){ alert(&#39;我是ul,我被点击了&#39;); }, false); li.addEventListener(&#39;click&#39;, function(){ alert(&#39;我是li,我被点击了&#39;); }, false); </script>

在這段程式碼中，當我們點擊li的時候出發了li的click事件，但是在這時，ul的click事件也被觸發了，這就是事件的冒泡。搞明白這之後，我們就可以來說事件委託了，既然事件能從子元素(li)冒泡的父元素(ul)身上，那麼我們就可以給ul自己加一個click事件，把所有li的事件都委託給了我們的父級(ul)身上，可能到這裡有些朋友還是不明白這個事件委託到底有什麼用，我們在舉一個事件委託的實例來說明一下：

    
• 点击1
    
• 点击2
    
• 点击3
    
• 点击4
    
• 点击5

<script> //使用事件委托的代码 var ul=document.getElementsByTagName(&#39;ul&#39;)[0]; ul.addEventListener(&#39;click&#39;, function(e){ alert(e.target.innerHTML); }, false); //不使用事件委托，循环给li添加click事件 var li=document.getElementsByTagName(&#39;li&#39;) for(var i=0;i<li.length;i++){ li[i].onclick=function(){ alert(this.innerHTML); } } </script>

我們以上程式碼把事件委託給了ul，只給ul增加點擊事件，在瀏覽器中運行點擊對應的li會彈出li對應的innerHTML，這個function(e){};中的e這個參數其實就是當前我們點擊li時，系統傳給我們的一些事件訊息,e.target實際上指的就是當前我們點擊的這個li，在這裡我們每次彈出的都是當前點擊物件的innerHTML，這就是一個簡單的事件委託的案例。

而事件委託對於我們優化程式碼意義是非常大的，我們都知道，頻繁的dom操作是非常耗費效能的，現在ul裡邊是5個li，我們假如不用事件委託實作上面程式碼所作所為的事情，就需要用for循環，給每個li都寫一個click事件，這樣一來dom操作就比較多了，如果是10個li呢，100個甚至更多呢，單不說dom操作影響的效能，li過多for循環本身就會佔用大量的事件。如果利用事件委託，既避免了for循環耗費的性能，又省去了繁多的dom操作耗費的性能。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Vue實作動態刷新Echarts元件

在bootstrap中使用selectpicker實作下拉方塊

#url、href、src在JS中的使用

#

以上是JS事件委託使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！