1. 事件委托:

* 将多个子元素(li)的事件监听委托给父辈元素(ul)处理

* 监听回调是加在了父辈元素上

* 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)

* 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数

2. 使用事件委托的好处

* 添加新的子元素, 自动有事件响应处理

* 减少事件监听的数量: n==>1

3. jQuery的事件委托API

* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)

* 移除事件委托: $(parentSelector).undelegate(eventName)

4.实例：

html：

  <ul>
      <li>1111</li>
      <li>2222</li>
      <li>3333</li>
      <li>4444</li>
  </ul>
  <br />
  <button id="btn1">添加新的li</button>
  <button id="btn2">删除ul上的事件委托的监听器</button>

jQuery：

    <script>
      //建立事件委派
      $("ul").delegate("li", "click", function () {
        this.style.background = "red";
      });

      //新增li
      $("#btn1").on("click", function () {
        $("<li>新增的li....</li>").appendTo($("ul"));
      });

      //点击取消事件委派
      $("#btn2").on("click", function () {
        $("ul").undelegate("click");
      });
    </script>