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：

<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：

<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>

最后

以上就是体贴雪糕为你收集整理的jQuery事件委派（delegate(s,[t],[d],fn)）的全部内容，希望文章能够帮你解决jQuery事件委派（delegate(s,[t],[d],fn)）所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。