【javaScript】js中的事件委托

前言

续上一章节 addEventListener第三个参数的使用和事件冒泡和捕获机制 的事件冒泡的另一大好处 >>> 事件委托

事件委托

概念：
事件委托：也称事件代理 就是利用冒泡的原理 把加事件加到父级上，触发执行效果

场景分析：
需求： 有一个列表，当鼠标移入每个li，背景颜色变红
当不用时间委托时我么可以这样写：

window.onload = function(){ 
    var Ul = document.getElementById('lists');
    var Li = document.getElementsByTagName('li'); //获取所有列
    for(var i =0;i < Li .length;i++){ 
         Li[i].onmouseover = function(){ 
         this.style.background = "red";
    }
}
// html
<ul id="lists">
     <li>1</li>
     <li>2</li>
     <li>3</li>
     <li>4</li>
     <li>5</li>
     <li>6</li>
</ul>

性能问题：
当然这样一看代码也没什么问题，通过循环给每个li加事件，但想一想如果我们有很多个li,是不是要加很多次事件，这样其实是非常耗性能的。那么我们会想，能不能只加一个事件就能实现呢。

事件委托原理：
通过冒泡原理进行事件委托，我们可以把事件只加给父级ul,这样不管移入哪个li,都会触发父级的移入事件，（对冒泡不太理解的，可以参考我的上一篇事件冒泡），但这个时候也有个问题，因为我的需求是，让对应的li变颜色，不是让整个列表变，它怎么知道我鼠标移入的是哪个LI，这个时候万能的事件对象中的一个属性就要出场了，就是事件源 (不管事件绑定在那个元素中 都指的是实际触发事件的那个的目标)，就是能获取到你当前鼠标所在的LI，

不过这个有兼容性问题， IE和标准下不同，标准指的就是比较新版本的那些浏览器了

IE：window.event.srcElement
标准：event.target

所以需要做下兼容，在优化一下代码：

  window.onload = function(){ 
    var Ul = document.getElementById('lists');
    var Li = document.getElementsByTagName('li');

  Ul.onmouseover = function(ev){ 
     var event = ev||window.event;  // 获取event对象
     var target = event.target || event.srcElement; // 获取触发事件的目标对象
    
     if(target.nodeName.toLowerCase() == 'li'){  //判断目标对象是不是li
        target.style.cssText += ';background: red;';
     }
  }

注释：代码中加了一个标签名的判断，主要原因是如果不加判断，当你鼠标移入到父级ul上面的时候，整个列表就会变红，这不是我们想要的结果，所以要判断一下。
target.nodeName 弹出的名字是大写的，所以需要转换大小写再比较。

整个需求这样就完成了，而且当列表很多的时候大大的提高了性能。

完结

好了，这就是我所理解的事件委托了，如有错误，欢迎指正