事件委托（事件代理）概述

事件委托（事件代理）概述

• 什么是事件委托（事件代理）

事件委托（事件代理）是基于Js冒泡原理，把本来加在子元素身上的事件，加在了其父级身上。
通过event对象里记录的“事件源”，查找发生事件的真正子元素
获取事件源的方法存在兼容性问题，老IE浏览器是 window.event.srcElement，其他浏览器是 event.target

• 事件委托（事件代理）的优点

  （1）可以大量节省内存占用，减少事件注册
  （2）可以方便地动态添加和修改元素，不需要因为元素的改动而修改事件绑定

• 案例
  页面有个ul包含着4个li，鼠标移动到li上，li背景变成红色，移出，背景恢复原色。

html文件：

<ul id="ul1">
     <li>111</li>
     <li>222</li>
     <li>333</li>
     <li>444</li>
 </ul>

js文件：

//js写法
 <script type="text/javascript">
     window.onload = function(){
         var oUl = document.getElementById('ul1');                
         oUl.onmouseover = function(ev){
             var ev = ev || window.event;
             var target = ev.srcElement || ev.target;
             target .style.background = 'red';                    
         }
          
        oUl.onmouseout = function(ev){
            var ev = ev || window.event;
            var target = ev.srcElement || ev.target;
            target .style.background = '';                    
        }  
    }         
 </script>

//jq写法
  $("#ul1").on('mouseover',function(ev){
      var ev = ev || window.event;
      var target = ev.target || ev.srcElement;
      if(target.nodeName.toLowerCase() == 'li'){
          target.style.background = "red";
      }
  });
    
  $("#ul1").on('mouseout',function(ev){
       var ev = ev || window.event;
       var target = ev.target || ev.srcElement;
       if(target.nodeName.toLowerCase() == 'li'){
          target.style.background = "";
       }
  });