jQuery事件委托(委派/代理)
事件委托(委派/代理):
* 将多个子元素(li)的事件监听委托给父辈元素(ul)处理
* 监听回调是加在了父辈元素上
* 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)
* 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
事件委托的2方:
* 委托方: 业主 当前元素
* 被委托方: 中介 父元素
使用事件委托的好处
* 添加新的子元素, 自动有事件响应处理，所以在常用的新增表格行元素中存在按钮的时候，点击事件可以使用委托，就不用每次新增元素都得绑定一次事件
* 减少事件监听的数量: n==>1
jQuery的事件委托API
* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
* 移除事件委托: $(parentSelector).undelegate(eventName)
DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>20_事件委托2title>
head>
<body>
<ul>
<li>1111li>
<li>2222li>
<li>3333li>
<li>4444li>
ul>
<li>22222li>
<br>
<button id="btn1">添加新的libutton>
<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.... ')
})
$('#btn2').click(function () {
// 移除事件委托
$('ul').undelegate('click')
})
script>
body>
html>