jQuery从入门到熟练(20)

(3) 事件委托
理解: 将子元素的事件委托给父辈元素处理事件监听绑定在父元素上, 但事件发生在子元素上
*　事件会冒泡到父元素但最终调用的事件回调函数的是子元素: event.target好处新增的元素没有事件监听减少监听的数量(n==>1)编码delegate(selector, "eventName", function(event){}) // 回调函数中的this是子元素undelegate("eventName")
<ul> <li>11111</li> <li>1111111</li> <li>111111111</li> <li>11111111111</li></ul><li>22222</li><br><button>添加新的li</button><br><script src="js/jquery-1.10.1.js"></script><script> /* 需求： 1. 点击 li 背景就会变为红色 2. 点击 btn 就添加一个 li */ $("ul>li").click(function () { this.style.background = "red" }) $("#btn").click(function () { $("ul").append("<li>新增的li....</li>") })</script>
引入：绑定事件监听的问题: 新加的元素没有监听
事件委托(委派/代理):
将多个子元素(li)的事件监听委托给父辈元素(ul)处理监听回调是加在了父辈元素上当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
事件委托的2方:
委托方: 业主 li被委托方: 中介 ul
使用事件委托的好处
添加新的子元素, 自动有事件响应处理减少事件监听的数量: n==>1