javascript 事件委托 和jQuery事件绑定on、off 和one

 
一. 事件委托

什么是事件委托？用现实中的理解就是：有100 个学生同时在某天中午收到快递，但这

100 个学生不可能同时站在学校门口等，那么都会委托门卫去收取，然后再逐个交给学生。

而在jQuery 中，我们通过事件冒泡的特性，让子元素绑定的事件冒泡到父元素(或祖先元素)

上，然后再进行相关处理即可。

如果一个企业级应用做报表处理，表格有2000 行，每一行都有一个按钮处理。如果用

之前的.bind()处理，那么就需要绑定2000 个事件，就好比2000 个学生同时站在学校门口等

快递，不断会堵塞路口，还会发生各种意外。这种情况放到页面上也是一样，可能导致页面

极度变慢或直接异常。而且，2000 个按钮使用ajax 分页的话，.bind()方法无法动态绑定尚

未存在的元素。就好比，新转学的学生，快递员无法验证他的身份，就可能收不到快递。

//HTML 部分

<div style="background:red;width: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()的普通绑定。

二．on、off 和one

目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱，

为此jQuery1.7 以后推出了.on()和.off()方法彻底摒弃前面三组。

//替代.bind()方式

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

alert('替代.bind()');

});

//替代.bind()方式，并使用额外数据和事件对象

$('.button').on('click', {user : 'Lee'}, function (e) {

alert('替代.bind()' + e.data.user);

});

//替代.bind()方式，并绑定多个事件

$('.button').on('mouseover mouseout', function () {

alert('替代.bind()移入移出！');

});

//替代.bind()方式，以对象模式绑定多个事件

$('.button').on({

mouseover : function () {

alert('替代.bind()移入！');

},

mouseout : function () {

alert('替代.bind()移出！');

}

});

//替代.bind()方式，阻止默认行为并取消冒泡

$('form').on('submit', function () {

return false;

});

或

$('form').on('submit', false);

//替代.bind()方式，阻止默认行为

$('form').on('submit', function (e) {

e.preventDefault();

});

//替代.bind()方式，取消冒泡

$('form').on('submit', function (e) {

e.stopPropagation();

});

//替代.unbind()方式，移除事件

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

$('.button').off('click', fn);

$('.button').off('click.abc');

//替代.live()和.delegate()，事件委托

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

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

});

//替代.die()和.undelegate()，取消事件委托

$('#box').off('click', '.button');

注意：和之前方式一样，事件委托和取消事件委托也有各种搭配方式，比如额外数据、

命名空间等等，这里不在赘述。

不管是.bind()还是.on()，绑定事件后都不是自动移除事件的，需要通过.unbind()和.off()

来手工移除。jQuery 提供了.one()方法，绑定元素执行完毕后自动移除事件，可以方法仅触

发一次的事件。

//类似于.bind()只触发一次

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

alert('one 仅触发一次！');

});

//类似于.delegate()只触发一次

$('#box).one('click', 'click', function () {

alert('one 仅触发一次！');

});

 

三. 事件委托举例：

html代码：

<div>
<input id="a" type="button" value="按钮1">
<input id="a" type="button" value="按钮2">
</div>

jQuery代码：

$('div').click(function(e){
alert('事件类型：'+ e.type + '，Value：' + $(e.target).val());
})

点击【按钮1】，弹出：   事件类型：click，Value：按钮1。

注：e.type返回对象的事件类型，如click、mousedown；e.target返回触发事件的jQuery对象。

 

四. 推荐一个javascript在线测试工具，支持选择JQuery库，可以测试html、css、js代码