js原生之事件委托

什么是事件委托？

委托是啥意思？就是本来吧中午啊你要自己去买饭，结果这个时候室友问你要不要带饭？你说好啊！于是带饭这个操作就被你委托给室友了。
事件委托 的意思是，本来这个事件是由节点本身去执行的，现在用其他节点委托执行。

怎么进行事件委托？

我们来看一个再普通不过的例子吧，有以下html结构

<ul  id="delegate">
  <li>item1</li>
  <li>item2</li>
  <li>item3</li>
  <li>item4</li>
  <li>item5</li>
</ul>

假设这时候有需求如下，我希望鼠标经过li节点的时候，节点的背景色变为红色，鼠标移出则变回来，我们通常会这么写

<script type="text/javascript">
var aUl=document.querySelector('#delegate');
var aLis=div.querySelectorAll('li');
for (var i = 0; i < aLis.length; i++) {
  aLis[i].onmouseover=function(){
    this.style.backgroundColor='red';
  }

  aLis[i].onmouseout=function(){
    this.style.backgroundColor='';
  }
}
</script>

没毛病哈~那么问题来了，我们怎么把li的事件委托给其他节点替他执行呢？
首先说下事件委托的原理是利用什么，大家都知道js里面事件有冒泡机制，当我们鼠标经过li的时候它的onmouseover事件会触发，它的父亲元素ul的onmouseover事件也会被触发,事件委托就是利用事件冒泡机制来完成的。不多说上代码

var aUl=document.querySelector('#delegate');
var aLis=div.querySelectorAll('li');

aUl.onmouseover=function(ev){
  var ev=ev||window.event;//事件对象兼容
  var target=ev.target||ev.srcElement;//冒泡时拿到当前的触发事件的元素（事件源）
  target.style.backgroundColor='red';
}
aUl.onmouseout=function(ev){
  var ev=ev||window.event;
  var target=ev.target||ev.srcElement;
  target.style.backgroundColor='';
}

以上代码就完成了最简单的事件委托，是不是很简单？但是问题来了，这样写有没有问题？
答案是：有！！！
我们给 ul 添加的onmouseover和onmouseout事件，那么鼠标经过 ul ，ul的背景也是会边红的！！！
那么怎么办？
其实我们获取到事件源之后，事件源是一个 DOM 节点，我们是可以拿到节点的名字 target.nodeName,我们只需要判断下节点名字就行啦啊！！来来来！！！

aUl.onmouseover=function(ev){
  var ev=ev||window.event;
  var target=ev.target||ev.srcElement;
  console.log(target.nodeName);
  if(target.nodeName=='LI'){
      target.style.backgroundColor='red';
    }
}
aUl.onmouseout=function(ev){
  var ev=ev||window.event;
  var target=ev.target||ev.srcElement;
  if(target.nodeName=='LI'){
      target.style.backgroundColor='';
    }
}

这么写有什么好处呢？

1、对比委托前和委托后的代码就知道，本来每个 li 上都有两个事件句柄，委托后我们只给 ul 增加了两个事件句柄，可以大量节省内存占用，减少事件注册
2、通过js代码新添加li节点同样有事件，不用单独注册（相似如jquery.delegate()）

注：事件委托虽然好，但是还是有需要注意的地方的，最明显的就是我的例子中判断是不是 li 节点这个处理，当前节点结构简单，如果被委托元素内节点类型众多，判断条件就会很复杂。