jQuery事件类型

jQuery事件

1. 事件驱动：目的是将一个事件内容传递给另一个事件内容，传递的是私有局部数据，各个事件相互独立，所以事件可删除和添加，不会相互影响。注入数据用set、get。
2. 注入式驱动：AJAX将数据注入到大界面，然后大界面再注入给模块，模块再注入给事件。

事件类型

1. 绑定

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100)
	.bind("click",clickHandler);
//该方法无论创建多少div，都只会执行一次函数

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100)
	.bind("click",function(e){ });
//匿名函数，该方法创建多少div就会执行多少次函数

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100)
	.bind("mouseenter mouseleave",function(e){ });
//侦听多个事件，执行一个方法。

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100).bind({
	“mouseenter”:function(e){ },
	"mouseleave":function(e){ }
});//侦听多个事件，执行多个方法。

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100)
	.bind("click",{a:1,b:2},clickHandler);//不能作为匿名函数传参
function clickHandler(e){console.log e.data;}//输出结果为{a:1,b:2}

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100)
	.bind("click",{a:1,b:2},clickHandler);
$(this).unbind("click".clickHandler);//解除事件绑定，<=>this.removeListener(),this指代div

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100)
	.bind("click",function(e){console.log("a"),
	"click",function(e){console.log("b");});//输出结果为abababababab...

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100)
	.bind("click",function(e){console.log("a"),
	"click",function(e){console.log("b");
	$(this).unbind("click");
});//此时所有事件全部被解绑

2. 简写事件

$("<div></div>").appendTo("body").css("backgroundColor","red").width(100).height(100)
	.click(function(e){ });

$(document).ready(function(){
	console.log("a");
})//DOM创建放入完成后就会执行ready，ready只针对document文档来使用，可做预加载

window.onload=function(){
	console.log("b");
}//页面中所有内容加载完成后才会执行（包括图片），所以不可做预加载

3. 模拟事件

/*trigger是模拟事件的传输方法，在创建时会自动冒泡，自动执行默认事件*/
$(document).bind("click",function(e,a,b){
	console.log(e,a,b)}).trigger("click",[3,5]);

$(document).on("click");//侦听事件
$(document).off("click");//取消事件
$(document).one("click");//只执行一次click，执行完成后就会删除