事件委託

你若精彩，蝴蝶自來發表於2018-08-01
事件

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>

 

相關文章