js事件委托篇(附js一般寫法和js、jq事件委托寫法)

參考： jQuery代碼優化：事件委托篇

使用該技術能讓你避免對特定的每個節點添加事件監聽器；相反，事件監聽器被添加在他們的父元素上，事件監聽器會分析從子元素上冒泡上來的事件，並找到是哪個子元素事件。

現實當中，前台MM收到快遞后，她會判斷收件人是誰，然后按照收件人的要求簽收，甚至代為付款。(公司也不會容忍那么多員工站在門口就為了等快遞);
這種事件委托還有個好處，就是即便公司又來很多員工，前台MM照樣可以簽收新員工的快遞，新員工即便剛來但一樣擁有拿自己快件的方法；

通俗來講： 事件有：onclick、onmouseover、onmouseout等等；委托呢，就是讓別人來做，這件事情本身是加在元素上，然而你卻加載別人身上來做，完成事件；

原理：
利用冒泡原理，將事件加在父級上觸發，執行效果；

好處：

1. 提高性能
2. 新添加元素，可以直接擁有事件；

事件源 :
跟this作用一樣(他不用看指向問題，誰操作的就是誰),event對象下的

使用情景：

　　* 為DOM中的很多元素綁定相同事件；
　　* 為DOM中尚不存在的元素綁定事件；

栗子:

需要觸發每個li來改變他們的背景顏色

    <ul id="ul">
       <li>111111111</li>
       <li>22222222222</li>
       <li>33333333</li>
       <li>44444444444</li>
    </ul>

js一般寫法：

  window.onload = function(){
     var oUl = document.getElementById('ul');
     var aLi = oUl.getElementsByTagName('li');

     for(var i=0; i<aLi.length; i++){
         aLi[i].onmouseover = function(){
             this.style.background = 'red';
         }
         aLi[i].onmouseout = function(){
             this.style.background = ' ';
         }
     }
  }

事件委托的js寫法：

window.onload = function(){
    var oUl = document.getElementById('ul');
    var aLi = oUl.getElementsByTagName('li');  
    /*這里用到事件源：event對象， 事件源，不管在哪個事件中，只要你操作的那個元素就是事件源
               ie： window.event.srcElent
            標准下： event.target
         nodeName: 找到元素的標簽名；
     */
    oUl.onmouseover = function(ev) {
        var ev = ev||window.event;
        var target = ev.target || ev.srcElement;
       
        // console.log(target.innerHTML);
       
        if(target.nodeName.toLowerCase() == "li"){
           target.style.background = 'red';
        }
    }
    oUl.onmouseout = function(ev) {
        var ev = ev || window.event;
        var target = ev.target|| ev.srcElement;
       
        if(target.nodeName.toLowerCase() == 'li'){
           target.style.background = ' ';
        }
    }
}

事件委托的jq寫法

    $(function(){
        $("#ul").on('click','li',function(){
            if(!$(this).attr('s')){
                $(this).css('background','red');
                $(this).attr('s',true);
            }else{
                $(this).css('background','#fff');
                $(this).removeAttr('s');
            }
        })
    })

還有一種使用delegate()方法代替on() ; 現多不用 ，用法同on，只是參數順序有變...delegate('li','click',function(){...})...