1、模拟事件
在jquery中,可以使用trigger()方法完成模拟操作
(1)常用模拟
$('#btn').trigger("click");
近似于$('#btn').click();
(2)触发自定义事件
对于myClick表示自定义事件,若要触发,使用trigger()
$("#btn").bind("myClick",function(){
alert("欢迎光临!");
}).trigger();
分开两步来讲,即第一步,自定义事件;第二步,触发模拟操作trigger()方法
$('#btn').bind("myClick",function(){
$('#test').append("<p>欢迎光临</p>");
});
若要触发这个自定义事件,使用一下代码实现
$('#btn').trigger("myClick");
(3)传递数据
trigger(type,[data])方法有两个参数,第1个参数为要触发的类型,第2个参数是要传递给事件处理函数的附加数据,以数组形式传递。
$("#btn').bind("myClick",function(e,data1,data2){ //获取数据;
$("#test").append("<p>"+data1+data2+"</p>");
});
<input type="submit" value="提交" />
若要点击“提交”按钮,即会触发事件trigger()方法
$("input").trigger("focus");
由于trigger()方法触发事件时,不仅会触发<input>元素绑定的focus事件,也会使<input>元素本身得到焦点,即浏览器默认操作。
若只想触发绑定的focus事件,而不想执行浏览器默认操作,可以使用Jquery中另一种方法——triggerHandler()
$("input").triggerHandler("focus");
trigger()与triggerHandler()区别
a、触发事件范围:trigger()触发的为全部事件流程,而triggerHandler()触发的事件阻止了默认行为。
类似于“event.preventDefault()”
$("input").click(function(e){
e.preventDefault();
}).trigger("click");
b、执行次数:trigger()会把所有的都执行,而triggerHandler()只能执行一次
c、返回值:trigger()返回Jquery对象,可以连缀,而trigger()返回的是一个值(return或undefined),
无法实现连缀。
d、事件冒泡:trigger()会产生冒泡,而triggerHandler()不会产生冒泡。
2、命名空间
可以把为元素绑定的多个事件类型用命名空间规范起来,用“.”进行规范使用
$(function(){
$("div").bind("click.abc",function(){
$("body").append("<p>abc</p>");
});
$("div").bind("click.123",function(){
$("body").append("<p>abc</p>");
});
$("button").click(function(){
$("div").unbind(".123");
});
});
如上所述,若要解除.123的绑定,即需要用命名空间规范。
3、事件委托
定义:在Jquery中,通过事件冒泡的特性,让子元素绑定的事件冒泡到父元素(或祖先元素)上,然后再做相关的处理。
之前使用的绑定事件,bind()方法绑定的多个事件,而在jquery中,提供的live()方法做事件委托处理,永远只会绑定一次事件,live()绑定的是document。同时,bind()不会动态绑定事件。
例如下例,在绑定“button”时,实际是绑定的document
$('button').live("click",function(){
$(this).clone().appendTo("#box");
});
又因为(1)live具有连续冒泡,逐级到document上边,极为复杂,所以大多数被删除;
(2)live不支持元素连缀调用。
同时,与live相对应的还有“die”方法,都已经被删除,不再使用。此时的“die”类似于“unbind”
A、live的替代方法:delegate()
delegate('参数1','参数2','参数3')
参数1:绑定的元素;参数2:触发的事件类型;参数3:引发的事件类型fn
$('input').delegate("button","click",function(){
alert("abc");
});
4、on/off/one
对于普通的绑定为bind(),普通解绑为unbind();
对于事件委托为live()、delegate(),解除委托为die()、undelegate()。
综上而言,新方法绑定为on()、解绑为off()。
(1)用on代替bind
a、普通类型
$(".button").on("click",function(){
alert("代替bind");
});
$("button").on('mouseover,mouseout',function(){
alert("sbnj");
});
$('.button').on({mouseover:function(e){
alert('移入');
},
mouseout:function(e){
alert('移出');
}
});
(2)off解除事件委托
$('#box').off('click','.button');
(3)one仅一次事件触发
$('.button').one('click',function(){
alert('仅一次事件触发!');
});