作用 clas title 现实 调用 指定 更强 die() 停止
一. 事件委托
什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这
100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生。
而在jQuery 中,我们通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)
上,然后再进行相关处理即可。
如果一个企业级应用做报表处理,表格有2000 行,每一行都有一个按钮处理。如果用
之前的.bind()处理,那么就需要绑定2000 个事件,就好比2000 个学生同时站在学校门口等
快递,不断会堵塞路口,还会发生各种意外。这种情况放到页面上也是一样,可能导致页面
极度变慢或直接异常。而且,2000 个按钮使用ajax 分页的话,.bind()方法无法动态绑定尚
未存在的元素。就好比,新转学的学生,快递员无法验证他的身份,就可能收不到快递。
//html 部分
注意:.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>
结果:红线圈的点击可以弹框
四:总结
bind:绑定事件,页面初始化绑定,可以同时绑定多个,JS动态添加的元素不起作用
onclick: 绑定事件,页面初始化绑定,一次绑定一个,JS动态添加的元素不起作用,bind的简便写法
live: 事件委托,也是事件绑定,JS动态加入的元素仍然起作用(事件委托:动态添加的元素仍然有事件)
on: 绑定事件,也是绑定事件(功能更强大)
参考:http://www.cnblogs.com/sooj/archive/2014/02/25/3566718.html
javascript事件委托和jQuery事件绑定on、off 和one
来源: http://www.bubuko.com/infodetail-2376002.html