jQuery事件委派（delegate(s,[t],[d],fn)）

86 阅读 0 评论 57 点赞

我是靠谱客的博主体贴雪糕，这篇文章主要介绍jQuery事件委派（delegate(s,[t],[d],fn)），现在分享给大家，希望可以做个参考。

1. 事件委托:

* 将多个子元素(li)的事件监听委托给父辈元素(ul)处理

* 监听回调是加在了父辈元素上

* 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)

* 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数

2. 使用事件委托的好处

* 添加新的子元素, 自动有事件响应处理

* 减少事件监听的数量: n==>1

3. jQuery的事件委托API

* 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)

* 移除事件委托: $(parentSelector).undelegate(eventName)

4.实例：

html：

复制代码

1
2
3
4
5
6
7
8
9
10

<ul>
<li>1111</li>
<li>2222</li>
<li>3333</li>
<li>4444</li>
</ul>
<br />
<button id="btn1">添加新的li</button>
<button id="btn2">删除ul上的事件委托的监听器</button>

jQuery：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

<script>
//建立事件委派
$("ul").delegate("li", "click", function () {
this.style.background = "red";
});
//新增li
$("#btn1").on("click", function () {
$("<li>新增的li....</li>").appendTo($("ul"));
});
//点击取消事件委派
$("#btn2").on("click", function () {
$("ul").undelegate("click");
});
</script>