事件委托

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)

 

需求：
1. 点击 li 背景就会变为红色
2. 点击 btn1 就添加一个 li

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

<body>

<ul>
  <li>11111</li>
  <li>1111111</li>
  <li>111111111</li>
  <li>11111111111</li>
</ul>

<li>22222</li>
<br>
<button id="btn">添加新的li</button>
<br>

<!--
绑定事件监听的问题: 新加的元素没有监听
-->
<script src="../../js/jquery-1.10.1.js"></script>
<script>
  /*
   需求：
   1. 点击 li 背景就会变为红色
   2. 点击 btn1 就添加一个 li
  */
 
 //1. 点击 li 背景就会变为红色
 $("ul").delegate('li','click',function(){
     $(this).css('background','red');
 })
 //2. 点击 btn1 就添加一个 li
 var $btn = $("#btn");
 $btn.click(function(){
     $("ul").append("<li>新增的ul</li>");
 })

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

 

posted @ 2018-08-01 10:33  你若精彩，蝴蝶自来  阅读(189)  评论(0)  编辑  收藏  举报