一. 事件委托
什么是事件委托?用现实中的理解就是:有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代码
http://jsfiddle.net
以上就是javascript事件委托和jQuery事件绑定on、off 和one的内容,更多相关内容请关注PHP中文网(m.sbmmt.com)!