JQuery中的各种事件

文档加载完成

加载文档完成触发：

$(document).ready(function(){})

事件可以多次执行。
代码可以简写为：

$(function(){})

事件绑定

bind(type、[data]、function)

type为事件类型：
blur、focus、load、resize、scroll、unload、click、dblclick、mousedown、mouseup、mousemove、mouseover、mouseout、mouseenter、mouseleave、change、select、submit、keydown、keypress、keyup、error等

data为方法传递的参数,可以忽略

function是用来绑定的处理函数.
eg：为id为box 的div的元素绑定单击事件。

$('#box').bind('click',function()
	 {
		 alert('被点击');
	 }
)

绑定单个事件

bind('事件名',function(){})
on('事件名',function(){})

绑定多个事件

on({'事件名1':function(){},'事件名2':function(){},...})

eg:

$('div').bind('mouseover mouseout',function(){
	 $(this).toggleClass('over');
})

bind跟on绑定事件的区别
主要是事件冒泡
jquery1.7版本以后bind()函数推荐用on()来代替。

多事件处理
1.利用空格分隔多事件
绑定较为死板，不能给事件单独绑定函数,适合处理多个事件调用同一函数情况；

$(selector).bind("click dbclick mouseout",data,function(){});

2.利用大括号灵活定义多事件
绑定较为灵活，可以给事件单独绑定函数

$(selector).bind({event1:function,event2:function, ...})

hover()方法
此方法是一个合成事件，方法触发mouseenter 和 mouseleave 事件。
用于模拟光标悬停事件.当光标移动到元素上时,会触发指定的第一个函数,当光标移出这个元素时,触发指定的第二个函数.

事件移除

unbind()

$('#box').unbind('click');

如果为同一个元素绑定了多个事件

$('#box').unbind('事件名称',fun1);

事件冒泡

冒泡事件就是点击子节点，会向上触发父节点，祖先节点的点击事件。

阻止事件冒泡
在绑定的事件中加入event参数，并在函数中增加event.stopPropagation()调用就可以阻止事件冒泡。

也可以使用return false阻止冒泡。

event中还有一个方法：event.preventDefault();作用是阻止默认行为，如表单提交！

mouseenter与mouseleave事件

mouseover事件会触发事件冒泡
所以推荐使用mouseenter事件

模拟触发事件

有时我们更希望让事件自动执行，而不用手动触发，或者在一个事件中调用另一个事件的处理函数。这时我们可以考虑使用模拟操作

$('box').click(function(){
	$('#btn').trigger('click');//模拟操作触发的#btn的click事件.
})

模拟操作-传递数据

trigger(type [,data])方法有两个参数

第一个参数是要触发的事件类型,
第二个参数是传递给事件处理函数的附加数据,以数组的形式传递

$('#btn').bind('click',function(event,mes,mes2){
	alert(mes+','+mes2);
})
$('#btn').trigger('click',['Hello','World!']);

注意:在事件绑定时的event参数是不可以省略的.但在调用时可以不指定。

执行默认操作
triggerHandler()不会触发默认行为,而只执行事件代码.

$(function(){
	$("#name").focus(function(){
		$(this).css("border","1px solid#900");
	})
	$("#btn").click(function(){
		$("#name").trigger("focus");
	})
	$("#btn2").click(function(){
		$("#name").triggerHandler("focus");
	})
})