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>