5个jquery常用的事件 jquery的基本事件

在 JavaScript 的学习中，有很多使用的事件，常用的事件有：click、dblclick、 mousedown、mouseup、mousemove、mouseover、mouseout、change、select、submit、keydown、 keypress、keyup、blur、focus、load、resize、scroll、error。

1.事件的绑定

jQuery 通过.bind()方法来为元素绑定这些事件。可以传递三个参数：bind(type,[data],fn)， type 表示一个或多个类型的事件名字符串；[data]是可选的，作为 event.data 属性值传递一个 额外的数据，这个数据是一个字符串、一个数字、一个数组或一个对象；fn 表示绑定到指 定元素的处理函数。

//使用点击事件 
	$('input').bind('click',function(){ //点击按钮后执行匿名函数   
		alert('点击！');   
	});  

	//普通处理函数   
	$('input').bind('click',fn); //执行普通函数式无须圆括号   
	function fn(){   
		alert('点击！');   
	}  	//可以同时绑定多个事件   
	$('input').bind('mouseout mouseover', function(){ //移入和移出分别执行一次  
		$('div').html(function(index,value){ 
			returnvalue+'1'; 
		});   
	});  

	//通过对象键值对绑定多个参数   
	$('input').bind({   //传递一个对象 

		'mouseout':function(){   //事件名的引号可以省略   
			alert('移出');   
		},   		'mouseover':function(){   
			alert('移入');   
		}   
	});  	//使用 unbind 删除绑定的事件   
	$('input').unbind(); //删除所有当前元素的事件  	//使用 unbind 参数删除指定类型事件   
	$('input').unbind('click'); //删除当前元素的 click 事件  	//使用 unbind 参数删除指定处理函数的事件   
	function fn1(){   
		alert('点击 1');   
	}   
	function fn2(){   
		alert('点击 2');   
	}  	$('input').bind('click',fn1);  
	$('input').bind('click',fn2);  
	$('input').unbind('click',fn1); //只删除 fn1 处理函数的事件

2.复合事件

方法                                                描述

ready（fn）                           当DOM加载完毕触发事件

hover（[fn1],fn2）                 当鼠标移入触发第一个fn1,移出触发fn2

toggle（fn1,fn2[fn3..]）          已废弃，当鼠标点击触发fn1,在点击触发fn2...

//背景移入移出切换效果 
	$('div').hover(function(){   
		$(this).css('background','black'); //mouseenter 效果   
	},function(){   
		$(this).css('background','red'); //mouseleave 效果，可省略   
	});

注意：.hover()方法是结合了.mouseenter()方法和.mouseleva()方法，并非.mouseover() 和.mouseout()方法。

.toggle()这个方法比较特殊，这个方法有两层含义，第一层含义就是已经被 1.8 版废用、 1.9 版删除掉的用法，也就是点击切换复合事件的用法。第二层函数将会在动画那里讲解到。

既然废弃掉了，就不应该使用。被删除的原因是：以减少混乱和提高潜在的模块化程度。 但你又非常想用这个方法，并且不想自己编写类似的功能，可以下载 jquery-migrate.js 文件，来向下兼容已被删除掉的方法。

//背景点击切换效果(1.9 版删除掉了)   
	<scripttype="text/javascript"src="jquery-migrate-1.2.1.js"></script>  
	$('div').toggle(function(){ //第一次点击切换   
		$(this).css('background','black');   
	},function(){ //第二次点击切换   
		$(this).css('background','blue');   
	},function(){ //第三次点击切换   
		$(this).css('background','red');   
	});

注意：由于官方已经删除掉这个方法，所以也是不推荐使用的，如果在不基于向下兼容 的插件 JS。我们可以自己实现这个功能。

var flag=1; //计数器   
	$('div').click(function(){   
		if(flag==1){ //第一次点击   
			$(this).css('background','black');   
			flag=2;   
		}elseif(flag==2){ //第二次点击   
			$(this).css('background','blue');   
			flag=3   
		}elseif(flag==3){ //第三次点击   
			$(this).css('background','red');   
			flag=1   
		}   
	});