jQuery 高级事件（事件委托）

时间 2019-11-12

标签 jquery 高级事件委托栏目 JQuery 繁體版

原文原文链接

这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而之后再添加的元素则不会有。为此须要再使用一次 .bind() 才行。好比说ajax

<body>app

<div class="clickme">Click here</div>函数

</body> 测试

能够给这个元素绑定一个简单的click事件：this

$('.clickme').bind('click', function() {spa

alert("Bound handler called.");插件

}); 对象

当点击了元素，就会弹出一个警告框。而后，想象一下这以后有另外一个元素添加进来了。事件

$('body').append('<div class="clickme">Another target</div>'); get

尽管这个新的元素也可以匹配选择器 ".clickme" ，可是因为这个元素是在调用 .bind() 以后添加的，因此点击这个元素不会有任何效果。

.live() 就提供了对应这种状况的方法。若是咱们是这样绑定click事件的：

$('.clickme').live('click', function() {

alert("Live handler called.");

});

而后再添加一个新元素：

$('body').append('<div class="clickme">Another target</div>');

而后再点击新增的元素，他依然可以触发事件处理函数。

什么是事件委托？用现实中的理解就是：有 100 个学生同时在某天中午收到快递，但这 100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，而后再逐个交给学生。而在 jQuery 中，咱们经过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素) 上，而后再进行相关处理便可。

若是一个企业级应用作报表处理，表格有 2000 行，每一行都有一个按钮处理。若是用以前的.bind()处理，那么就须要绑定 2000 个事件，就比如 2000 个学生同时站在学校门口等快递，不断会堵塞路口，还会发生各类意外。这种状况放到页面上也是同样，可能致使页面极度变慢或直接异常。并且，2000 个按钮使用 ajax 分页的话，.bind()方法没法动态绑定还没有存在的元素。就比如，新转学的学生，快递员没法验证他的身份，就可能收不到快递。

//HTML 部分

</div>

//使用.bind()不具有动态绑定功能，只有点击原始按钮才能生成

$('.button').bind('click', function(){

$(this).clone().appendTo('#box');

});

//使用.live()具有动态绑定功能，jQuery1.3 使用，jQuery1.7 以后废弃，jQuery1.9 删除

$('.button').live('click',function(){

$(this).clone().appendTo('#box');

});

.live()原理就是把 click 事件绑定到祖先元素$(document)上，而只须要给$(document)绑定一次便可，而非 2000 次。而后就能够处理后续动态加载的按钮的单击事件。

在接受任何事件时，$(document)对象都会检查事件类型(event.type)和事件目标(event.target)，若是 click 事件是.button，那么就执行委托给它的处理程序。.live()方法已经被删除，没法使用了。须要测试使用的话，须要引入向下兼容插件。

//.live()没法使用连接连缀调用，由于参数的特性致使

$('#box').children(0).live('click', function(){

$(this).clone().appendTo('#box');

});

在上面的例子中，咱们使用了.clone()克隆。其实若是想把事件行为复制过来，咱们只须要传递 true 便可：`.clone(true)`。这样也能实现相似事件委托的功能，但原理却大相径庭。

一个是复制事件行为，一个是事件委托。而在非克隆操做下，此类功能只能使用事件委托。

$('.button').live('click',function(){

$('<input type="button" value="复制的" class="button"/>').appendTo('#box');

});

当咱们须要中止事件委托的时候，可使用.die()来取消掉。

$('.button').die('click');

因为.live()和.die()在 jQuery1.4.3 版本中废弃了，以后推出语义清晰、减小冒泡传播层次、又支持连接连缀调用方式的方法：`.delegate()和.undelegate()`。但这个方法在 jQuery1.7 版本中被.on()方法整合替代了。

$('#box').delegate('.button','click',function(){

$(this).clone().appendTo('#box');

});

$('#box').undelegate('.button','click');//支持连缀调用方式

$('div').first().delegate('.button', 'click',function(){

$(this).clone().appendTo('div:first');

});

注意：.delegate()须要指定父元素，而后第一个参数是当前元素，第二个参数是事件方式，第三个参数是执行函数。和.bind()方法同样，能够传递额外参数。.undelegate()和.unbind() 方法同样能够直接删除全部事件，好比：.undelegate('click')。也能够删除命名空间的事件，好比：

`.undelegate('click.abc')。`

注意：.live()和.delegate()和.bind()方法同样都是事件绑定，那么区别也很明显，用途上遵循两个规则：1.在 DOM 中不少元素绑定相同事件时；2.在 DOM 中尚不存在即将生成的元素绑定事件时；咱们推荐使用事件委托的绑定方式，不然推荐使用.bind()的普通绑定。