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

参考： jQuery代码优化：事件委托篇

使用该技术能让你避免对特定的每个节点添加事件监听器；相反，事件监听器被添加在他们的父元素上，事件监听器会分析从子元素上冒泡上来的事件，并找到是哪个子元素事件。

现实当中，前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。(公司也不会容忍那么多员工站在门口就为了等快递);
这种事件委托还有个好处，就是即便公司又来很多员工，前台MM照样可以签收新员工的快递，新员工即便刚来但一样拥有拿自己快件的方法；

通俗来讲： 事件有：onclick、onmouseover、onmouseout等等；委托呢，就是让别人来做，这件事情本身是加在元素上，然而你却加载别人身上来做，完成事件；

原理：
利用冒泡原理，将事件加在父级上触发，执行效果；

好处：

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

事件源 :
跟this作用一样(他不用看指向问题，谁操作的就是谁),event对象下的

使用情景：

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

栗子:

需要触发每个li来改变他们的背景颜色
```html

• 
  
• 111111111
  
• 22222222222
  
• 33333333
  
• 44444444444
  

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(){...})...

转载于:https://www.cnblogs.com/yc8930143/p/7270003.html