事件委托 delegate undelegate

<!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>

<!--
1. 事件委托:
  * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
  * 监听回调是加在了父辈元素上
  * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
  * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
2. 事件委托的2方:
  * 委托方: 业主  li
  * 被委托方: 中介  ul
3. 使用事件委托的好处
  * 添加新的子元素, 自动有事件响应处理
  * 减少事件监听的数量: n==>1
4. jQuery的事件委托API
  * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
  * 移除事件委托: $(parentSelector).undelegate(eventName)
-->
<script src="js/jquery-1.10.1.js"></script>
<script>
  $(function () {
    //事件委托 给父元素绑定delegate  第一个参数  为需要代理的子元素   第二个参数 事件名称  第三个参数  回调函数
    $('ul').delegate('li','click',function () {
      this.style.background  = 'pink';
    });
    $('#btn1').click(function () {
      $('ul').append('<li>我是新增的li</li>')
    });
//    解除事件委托
    $('#btn2').click(function () {
      $('ul').undelegate();
    })
  })
</script>
</body>
</html>
posted @ 2020-08-09 13:56  13522679763-任国强  阅读(155)  评论(0)    收藏  举报