事件委托(委派/代理):
* 将多个子元素(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>