javascript事件委托和jQuery事件绑定onoff 和one
Posted Qiao_Zhi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript事件委托和jQuery事件绑定onoff 和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 仅触发一次！\');
});
三:例子:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="js/jquery-1.8.3.js"></script> <script> $(function () { // 动态添加的不起作用 $(".me1").click(function () { alert("jQuery click绑定事件"); }); // 动态添加的不起作用 $(".me2").bind(\'click\', function () { alert("jQuery bind绑定事件"); }); // 动态添加的起作用， jquery 1.9on取代live $(\'.me3\').live(\'click\', function () { // $(\'.me3\').on(\'click\', function () { alert("jQuery live绑定事件."); }); $(\'.me4\').on(\'click\', function () { alert("jQuery on绑定事件."); }); //动态添加的不起作用 $(\'#live\').live(\'click\', function () { alert("事件委托"); }); }); </script> <title>Title</title> </head> <body> <input type="button" value="onclick" class="me1"> <input type="button" value="bind" class="me2"> <input type="button" value="live" class="me3"> <input type="button" value="on" class="me4"> <input type="button" value="增加标签" class="me11" onclick="addOne()"> <div id="live"> <p>AAA</p> <p>AAA</p> <p>AAA</p> <p>AAA</p> <p>AAA</p> </div> <script> function addOne() { $(\'body\').append($(\'<br/><input type="button" value="动态加的onclick不起作用" class="me1">\')); $(\'body\').append($(\'<input type="button" value="动态加的bind不起作用" class="me2">\')); $(\'body\').append($(\'<input type="button" value="动态加的live不起作用" class="me3">\')); $(\'body\').append($(\'<input type="button" value="动态加的on不起作用" class="me4">\')); } </script> </body> </html>
结果:红线圈的点击可以弹框
改进:使on可以委托(js加的也起作用)
先将事件绑定到body身上再过滤到.me4(也就是事件在class为me4身上)
$(\'body\').on(\'click\',\'.me4\', function () { alert("jQuery on绑定事件."); });
改进:on绑定多个事件并进行委托：
参数中写多个事件，根据事件类型进行判断(下面效果是实现hover()函数)
$("body").on("mouseover mouseout",\'.el_unflod\',function(event){
if(event.type == "mouseover"){
// 鼠标悬浮
alert("鼠标悬停")
}else if(event.type == "mouseout"){
// 鼠标离开
}
})
四:总结
bind:绑定事件，页面初始化绑定，可以同时绑定多个，JS动态添加的元素不起作用。而且用unbind()去掉事件只能去掉bind绑定的事件，对于标签种写的onclick属性之类的事件需要调用removeAttr删除属性才可以去掉事件，切记在bind事件之前去掉元素的onclick属性等事件。
onclick: 绑定事件，页面初始化绑定，一次绑定一个，JS动态添加的元素不起作用,bind的简便写法
live: 事件委托，也是事件绑定，JS动态加入的元素仍然起作用(事件委托:动态添加的元素仍然有事件)
on: 绑定事件，也是绑定事件(功能更强大),运用上述方法可以实现委托，动态添加的元素仍然有事件。
返回值:jQueryon(events,[selector],[data],fn) 概述 在选择元素上绑定一个或多个事件的事件处理函数。 on()方法绑定事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理程序所需的所有功能。帮助从旧的jQuery事件方法转换，see .bind(), .delegate(), 和 .live(). 要删除的.on()绑定的事件，请参阅.off()。要附加一个事件，只运行一次，然后删除自己， 请参阅.one() 参数 events,[selector],[data],fnV1.7events:一个或多个用空格分隔的事件类型和可选的命名空间，如"click"或"keydown.myPlugin" 。 selector:一个选择器字符串用于过滤器的触发事件的选择器元素的后代。如果选择的< null或省略，当它到达选定的元素，事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。 fn:该事件被触发时执行的函数。 false 值也可以做一个函数的简写，返回false。 events-map,[selector],[data]V1.7events-map:个用字符串表示的，一个或多个空格分隔的事件类型和可选的命名空间，值表示事件绑定的处理函数。 selector:一个选择器字符串过滤选定的元素，该选择器的后裔元素将调用处理程序。如果选择是空或被忽略，当它到达选定的元素，事件总是触发。 data:当一个事件被触发时要传递event.data给事件处理函数。
参考:http://www.cnblogs.com/sooj/archive/2014/02/25/3566718.html
以上是关于javascript事件委托和jQuery事件绑定onoff 和one的主要内容，如果未能解决你的问题，请参考以下文章