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

 事件委托(委派/代理):
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
  事件委托的2方:
  * 委托方: 业主  当前元素
  * 被委托方: 中介  父元素
  使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理，所以在常用的新增表格行元素中存在按钮的时候，点击事件可以使用委托，就不用每次新增元素都得绑定一次事件
  * 减少事件监听的数量: n==>1
  * 设置事件委托: $(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>

 

  

 

posted @ 2021-11-21 21:46  安静点--  阅读(574)  评论(0)  编辑  收藏  举报