-
操作模拟
1、trigger()
不是人为的去点击,而是模拟人去点击。例如,当页面加载完成后,自动触发按钮操作
$('input').click(function(){alert("click!");});
$('input').trigger('click');
额外数据获取
$('input').click(function(e,data1,data2){
alert(data1+"~"+data2);
}).trigger('click',['123','456']);
页面加载完成后自动弹出123~456,trigger额外数据只有一条时候可以省略中括号,多条时不可省略
$('input').click(function(e,data1,data2,data3,data4){ alert(data1+"~"+data2+"~"+data3[3]+"~"+data4.user);
}).trigger('click',['123','456',['a','b','c','d'],{'user':'Lee'}]);
也可以通过自定义的事件触发
//自定义触发
$('input').bind('myEvent',function(){
alert('hello');
}).trigger('myEvent');
2、triggerHandler()
与trigger()用法一样,只是添加了一些方法。
$('input').click(function(){
alert("qqqqqqqqq!!!!");
}).triggerHandler('click');
与trigger()的区别
(1)、不会执行默认事件
$('form').triggerHandler('submit');//不执行默认事件,提交后不跳转到另一个页面
$('form').trigger('submit');//执行默认事件,跳转到另一个页面
(2)、triggerHandler()只是执行第一个元素,trigger()执行所有的元素
(3)、trigger()返回的是jQuery对象,可以实现连缀
triggerHandler()返回return值或undefined
(4)、trigger()在创建事件时会冒泡,但这种冒泡在自定义事件中才能体现出来;而triggerHandler()则不会冒泡
<div class="d1">
<div class="d2">
<div class="d3">
div
</div>
</div>
</div>
$('div').bind('myEvent',function(){
alert('hello');
});
$('.d3').trigger('myEvent');
//出现3次alert
$('div').bind('myEvent',function(){
alert('hello');
});
$('.d3').triggerHandler('myEvent');
//出现一个alert
-
命名空间
$('input').bind('click',function(){
alert("abc");});
$('input').bind('click',function(){
alert("efg");});
例如:当我们想要移除alert为abc的click时,移除的方法只有 $('input').unbind('click');这样 两个click都移除了,不符合要求,因此可以用命名空间来解决问题
$('input').bind('click.abc',function(){
alert("abc");
});
$('input').bind('click.efg',function(){
alert("efg");});
移除: $('input').unbind('click.abc');
如此只移除了abc,并没有移除efg
也可以直接用(.abc),可以移除相同命名空间的不同事件。
trigger()和triggerHandler()也可以使用命名空间
$(‘input’).trigger(‘click.abc’);
-
事件委托
1
<div id="box">
<input type="button" class="button" value="按钮">
<input type="button" class="button" value="按钮">
<input type="button"class="button" value="按钮">
</div>
//事件不委托,绑定了3个事件
$('.button').live(function(){
alert("aaaaa");
});
//事件委托,绑定了1个事件,live绑定的不是button,绑定的是document,永远只会绑定一个事件
$('.button').live(function(){
alert("aaaaa");
});
2、动态绑定功能
//不能动态绑定
$('.button').bind('click',function(){
$(this).clone().appendTo('#box');
});
//live可以动态绑定,因为事件绑定在document
//live实际上是绑定在document,而点击button实际上是冒泡到document上,并且点击document时,需要验证event.type和event.target才能出发
$('.button').live('click',function(){
$(this).clone().appendTo('#box');
});
注意:live()不支持连缀调用
die()可以结束live()
由于live()存在很多问题,需要一层一层向上冒泡,复杂冗长,因此jQuery给我们提供了 一个更好的方法delegate()代替live()
$('#box').delegate('.button','click',function(){
$(this).clone().appendTo('#box');
});
//语义清楚,绑定的为父元素,id=box,对button执行操作,click事件
$('#box').undelegate('.button','click');
//删除绑定
当有很多元素需要事件绑定时,建议使用事件委托
-
on、off和one
总结一下以上学到的几种方法:
普通绑定:bind 普通解绑:unbind
事件委托:live(),delegate() 解除事件委托:die(),undelegate()
在新版jQuery()中提供了新的方法:
绑定:on()
解绑:off()
$('.button').on('click',{user:'lee'},function(e){
alert(e.data.user);
//alert('qqq');
});
//on代替普通绑定
$('.button').on('mouseover mouseout',function(){
alert("1111");
});
$('.button').on({
mouseover:function(){
alert("over!!!!!!");
},mouseout:function(){
alert("out!!!!!!!!");
}});
//on代替普通的多事件绑定
$('#box').on('click','.button',function(){
$(this).clone().appendTo('#box');
});
//on代替live()、delegate()d的事件委托
$('form').on('submit',function(){
return false;});
也可以写成$('form').on('submit',false);
//阻止了默认行为和冒泡行为
$('#box').off('click','.button');
//移除委托事件
off用法与unbind相同
one:绑定元素执行完毕后,执行自动移除事件,该方法可以用于只触发一次的事件
$('.button').one('click',function(){
alert("only one");
});
//只触发一次,警示框只弹出一次
$('#box').one('click','.button',function(){
$(this).clone().appendTo('#box');
});
//委托事件,按钮只能复制一次,只能执行一次