事件案例

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="UTF-8">
  <title>事件委托</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)
    this.style.background = 'red'
  })

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

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

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

事件委托(委派/代理)

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

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

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

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

事件委托的双方

委托方: 业主 li

被委托方: 中介 ul

使用事件委托的好处

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

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

jQuery的事件委托API

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

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