JavaScript事件代理

当我们需要对很多元素添加事件的时候，可以通过将事件添加到它们的父节点而将事件委托给父节点来触发处理函数。这主要得益于浏览器的事件冒泡机制

下面我们用一个简单的例子来介绍js的事件代理机制
有如下代码，当需要为ul下面拥有很多li

<ul class="list">
  <li>hello world</li>
  <li>name</li>
  <li>age</li>

需要做出效果，点击li标签时，在控制台输出这个li标签的内容，通常需要做以下处理

function $(selector){
  return document.querySelector(selector)
}

for(var i=0; i<$(".list").children.length; i++){
$(".list").children[i].onclick = function(){
  console.log(this.innerText)
}
}

依次点击li标签，控制台依次出现点击事件，如下图：

上图链接
使用事件代理机制，当事件冒泡到父元素时，通过检查事件对象(target)判断获取事件源li，代码如下：

function $(selector){
    return document.querySelector(selector)
}


$(".list").onclick = function(e){
  if(e.target){
    console.log(e.target.innerText)
  }
}

依次点击li标签，控制台依次出现点击事件，如下图：

注意： 如果这个元素中的li频繁增减，函数因开始就已经选中ul下的li，并不知道后面增减的li。此时代码就可能出错

此时使用事件代理机制，能更好简单的解决这个问题，为刚才两个案列增加一个add按钮，实现效果，每点击一次会在ul下新增一个li。

方法1

如上图，使用方法1，除原本的3个li外，点击新增的li无效果
方法2

使用方法2，点击新增的li，依然能实现效果。