jQuery事件委托(委派/代理)

事件委托(委派/代理):

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

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

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

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

事件委托的2方:

* 委托方: 业主当前元素

* 被委托方: 中介父元素

使用事件委托的好处

* 添加新的子元素, 自动有事件响应处理，所以在常用的新增表格行元素中存在按钮的时候，点击事件可以使用委托，就不用每次新增元素都得绑定一次事件

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

jQuery的事件委托API

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

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

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>20_事件委托2</title>
</head>

<body>
<ul>
  <li>1111</li>
  <li>2222</li>
  <li>3333</li>
  <li>4444</li>
</ul>

<li>22222</li>
<br>
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button> 
 
<script src="js/jquery-1.10.1.js"></script>
<script>
  // 设置事件委托
  $('ul').delegate('li', 'click', function () {
    // console.log(this)
    //具体是哪个li标签，由this来判断，this就是当前的标签对象
    this.style.background = 'red'
  })

  $('#btn1').click(function () {
    $('ul').append('<li>新增的li....</li>')
  })

  $('#btn2').click(function () {
    // 移除事件委托
    $('ul').undelegate('click')
  })

</script>
</body>
</html>