jquery学习随笔(模拟行为、事件委托)

$(‘input‘).click(function(e,data1,data2,data3,data4){
    alert(data1+‘|‘+data2+‘|‘+data3+‘|‘+data4.user);
   }).trigger(‘click‘,[‘123‘,‘abc‘,[‘a‘,‘b‘,‘c‘],{user:‘Lee‘}]);

$(‘input‘).bind(‘click‘,{user:‘Lee‘},function(e,data1,data2,data3,data4){
   alert(data1+‘|‘+data2+‘|‘+data3+‘|‘+e.data..user);                   bind中传额外数据  需要使用e.data获取
}).trigger(‘click‘,[‘123‘,‘abc‘,[‘a‘,‘b‘,‘c‘],{user:‘Lee‘}]);

也可以这么写，

$(‘input‘).bind(‘click‘,function(e,data1,data2,data3,data4){
   alert(data1+‘|‘+data2+‘|‘+data3+‘|‘+data4.user);                   
}).trigger(‘click‘,[‘123‘,‘abc‘,[‘a‘,‘b‘,‘c‘],{user:‘Lee‘}]);

$(‘input‘).click(function(){
   alert(‘执行模拟用户行为‘);
}).trigger(‘click‘);           会弹出三次  执行模拟用户行为

$(‘input‘).click(function(){
   alert(‘执行模拟用户行为‘);
}).triggerHandler(‘click‘);      只会弹出一次  执行模拟用户行为


<input type="button" value=‘按钮‘>
<input type="button" value=‘按钮‘>
<input type="button" value=‘按钮‘>

目前绑定事件和解绑的方法有三组共六个。由于这三组的共存可能会造成一定的混乱，
为此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 仅触发一次！‘);
});