js事件委託實例總結

事件委託也叫事件代理，簡單點說就是，把事件綁定到父級上，監聽子元素的冒泡事件。至於什麼是事件冒泡有疑問的請點擊js中的事件，其中有對事件冒泡的詳細解釋。在使用事件委託的時候我們要知道的知識點有什麼呢？

1、在利用事件委託的時候，我們還必須要知道一個概念：事件物件下的事件來源

事件來源：在事件中，目前操作的那個元素就是事件來源。例如我們點擊a標籤發生onclick事件時，事件來源就是a標籤，當點選li發生onclick事件時，那麼事件來源就是li

怎麼取得事件來源呢？

在IE下：window.event.srcElement;

標準下：event.target

相容性處理：var target = ev.target||ev.srcElement

2、找到目前元素的標籤名稱：nodeName（是大寫的要利用到toLowerCase()方法將其轉換為小寫）

寫了這麼多那麼利用事件委託有什麼好處吶？

1、可以提升效能

2、新加入的元素也會有先前的事件

至於體現在哪裡，以下就用例子來帶你來感受一下唄

HTML程式碼

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>

我們想要的效果就是當滑鼠移入li時讓對應的li背景顏色變成紅色，移出變成原來的顏色

如果利用一般的寫法是這樣的

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var aLi = oUl.querySelectorAll(&#39;li&#39;);
for(var i=0; i<aLi.length; i++){
    aLi[i].onmouseover = function(){
        this.style.background = &#39;red&#39;;
    }
    aLi[i].onmouseout = function(){
        this.style.background = &#39;&#39;;
    }
}
</script>

再看看利用事件委託怎麼做

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;//兼容性处理
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
</script>

上面的方法我們需要為每一個Li都綁定一個點擊事件，而下面的方法我們只需要為父級綁定一個點擊事件，li個數少的時候還好說，如果li有很多，可想而知，事件委託可以大大的提高性能

例子2、

HTML代碼  

<ul id="ul1">
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
    <li>1111111111</li>
</ul>
按钮

我們希望點擊按鈕的時候，在ul裡面再添加li，並且，滑鼠每次移入時，li的背景顏色改變，移出時背景顏色變回來，我們知道如果用平常的方法，我們每增加一個li都要為它再增加一個移入移出事件，有多麻煩，你自己試試就知道了，但是如果我麼用事件委託就不需要再為其每次都添加了，看下面程式碼（第一種想必大家都知道怎麼做就不再寫了，下面只寫利用事件委託怎麼寫）

<script>
var oUl = document.querySelector(&#39;#ul1&#39;);
var oBtn = document.querySelector(&#39;#btn&#39;);
oUl.onmouseover = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;red&#39;;
    }
}
oUl.onmouseout = function(ev){
    var ev = ev||event;
    var target = ev.target||ev.srcElement;
    if(target.nodeName.toLowerCase()==&#39;li&#39;){
        target.style.background =&#39;&#39;;
    }
}
oBtn.onclick = function(){
    var ali = document.createElement(&#39;li&#39;);
    ali.innerHTML = &#39;1111111111111&#39;;
    oUl.appendChild(ali);//不管我们在ul里面添加多少个li我么都不需要再次为其添加绑定事件
}
</script>

看完上面的是不是覺得事件委託真的很好用呢？所以趕緊用起來吧！                

相關建議：

JS事件委託實例詳解

#

以上是js事件委託實例總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！