js 中事件委托

---

知识准备：

事件的处理流分成三个阶段：

• 一：事件捕获阶段：当某个元素触发某个事件时，首先会触发根元素document, 然后事件将沿dom树向下传播给目标节点的每一个祖先节点，直到目标节点。
• 二：目标阶段：到达目标元素之后，执行目标元素的事件处理函数
• 三：事件冒泡阶段：从目标元素开始，事件将沿着DOM树向上传播，直到根节点。

Paste_Image.png

事件绑定的缺点

我们看一个demo:

<ul id="parent">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
  <li>item 4</li>
</ul>

通过绑定添加事件：

window.onload = function() {
  var parent = document.getElementById('parent');
  var children = parent.getElementsByTagName('li');
  for(var i = 0; i < children.length; i++){
    children[i].onclick = function() {
      alert(this.innerHTML);
    }
  }
}

弊端来了：如果这个ul的子元素允许无限的动态添加，就会出现问题：
1 新添加的元素不会绑定事件，所以需要每次添加li的同时添加绑定事件。
2 绑定的事件越多，性能越差。
为了解决这个问题，可以用事件代理——事件委托

事件委托

直接看demo

<ul id="parent">
  <li> item 1</li>
  <li> item 2</li>
</ul>
<scritpt>
  window.onload = function() {
    var parent = document.getElementById('parent');
    parent.addEventListener('click', function(event){
      var event = event || window.event;
      var target = event.target || event.srcElement;
      if(target.nodeName.toUpperCase() == 'LI'){
      alert(target.innerHTML);  
    }
    });
  }
</script>

好处
1 不需要为每一个元素都添加监听事件而是通过委托给父元素来处理。这样就减少了内存。性能提高了。
2 可以方便动态添加元素， 不需要再为新添加的元素重新绑定事件。