js的事件的代理和委托

本文要解释一下JavaScript事件的代理或者说委托的概念，首先直接上定义：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。上来就看定义，可能有点懵，所以到了最重要的解析部分。

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
</ul>

我现在有一个列表，想弹出每个li里的值，一般的做法是

var list = document.getElementById('list');
var liArr = list.getElementsByTagName('li');
for (var i = 0; i < liArr.length; i++) {
  liArr[i].addEventListener('click', function () {
    alert(this.innerHTML);
  });
}

这个做法已经实现了想要的效果，但是试想一种情景

<ul id="list">
  <li>1</li>
  <li>2</li>
  <li>3</li>
      ……
  <li>9999</li>
  <li>10000</li>    
</ul>

我现在有10000个li，要是做一个循环给每个li都加事件，简直是太耗性能了，于是事件的代理或者说委托就登场了。其实就是利用事件的冒泡原理来实现的。我点击一个元素，这个事件会沿着文档树一直向上传，直到根元素document。然后我给想要加事件的元素的父元素加上点击事件，委托它执行，然后再判断是它后代元素中的哪个元素触发的，运行相应函数。废话不多说，直接上代码。

document.getElementById('list').addEventListener('click', function (evt) {
  if (evt.target.tagName.toUpperCase() === 'LI') {
    alert(this.innerHTML);
  }
});

这样写使代码变得简洁了，且没有了大量的循环，节省了内存，可以说是一举两得。这种委托父元素执行事件，并利用事件冒泡的原理执行子元素相应函数的方法就叫事件的代理，或者叫事件的委托。