Jquery——Day3（高级事件）

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>");
});

（4）执行默认操作

<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");
});

b、含有数组类型data1，data2

$("button").on('mouseover,mouseout',function(){
	alert("sbnj");
});

c、两个事件分别执行

$('.button').on({mouseover:function(e){
alert('移入');
},
mouseout:function(e){
alert('移出');
}
});

（2）off解除事件委托

$('#box').off('click','.button');

（3）one仅一次事件触发

$('.button').one('click',function(){
	alert('仅一次事件触发！');
});