jQuery 高级事件(事件委托)

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

<body>

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

</body>

可以给这个元素绑定一个简单的click事件:

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

alert("Bound handler called.");

});

当点击了元素,就会弹出一个警告框。然后,想象一下这之后有另一个元素添加进来了。

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

尽管这个新的元素也能够匹配选择器 ".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 style="background:red;200px;height:200px;" id="box">

<input type="button" value="按钮" class="button"/>

</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()的普通绑定。

原文地址:https://www.cnblogs.com/No-nonsense/p/5076704.html