jQuery中的事件

jQuery中的事件

=> jQuery事件是对JavaScript事件的封装，常用事件分类

基础事件

鼠标事件
键盘事件
window事件
表单事件

复合事件

鼠标光标悬停
鼠标连续点击

鼠标事件

鼠标事件是当前用户在文档上移动或单击鼠标时而产生的事件

方法	描述	执行时机
click()	触发或将函数绑定到指定元素的click事件	单击鼠标时
mouseover()	触发或将函数绑定到指定元素的mouseover事件	鼠标指针移过时
mouseout()	触发或将函数绑定到指定元素的 mouseout事件	鼠标指针移出时
mouseenter()	触发或将函数绑定到指定元素的mouseenter事件	鼠标指针进入时
mouseleave()	触发或将函数绑定到指定元素的mouseleave事件	鼠标指针离开时

鼠标事件方法的区别

方法	相同点	不同点
mouseover()	鼠标进入被选元素时会触发	鼠标在其被选元素的子元素上来回进入时： 触发mouseover( ) 不触发mouseenter
mouseenter()
mouseout()	鼠标离开被选元素时会触发	鼠标在其被选元素的子元素上来回离开时： 触发mouseout 不触发mouseleave
mouseleave()

键盘事件

方法	描述	执行时机
keydown()	触发或将函数绑定到指定元素的keydown事件	按下键盘时
keyup( )	触发或将函数绑定到指定元素的keyup事件	释放按键时
keypress( )	触发或将函数绑定到指定元素的keypress事件	产生可打印的字符时

浏览器事件

调整窗口大小时，完成页面特效

语法

$(selector).resize();

当用户滚动指定的元素时，会发生 scroll 事件

语法

$(window).scroll( function() { /* ...do something... */ } );

绑定事件与移除事件

绑定事件
语法

bind(type,[data],fn);
//type 事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件
//[data] 可选函数
//fn处理函数
//*** 绑定单个事件
	 $(document).ready(function(){
		$(".on").bind("mouseover",function(){
			$(".topDown").show();
		});
	});
//***同时绑定多个事件
		$(".top-m .on").bind({
			mouseover:function(){
				$(".topDown").show();
			},
			mouseout:function(){
				$(".topDown").hide();
			}
		});

移除事件
语法：

unbind([type],[fn])
//[type]  事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
//[fn]  处理函数
//***提示  当unbind()不带参数时，表示移除所绑定的全部事件

复合事件

hover()方法
toggle()方法

hover()方法相当于mouseover与mouseout时间的组合
语法

hover(enter,leave);

示例：

$(".top-m .on").hover(function(){
	$(".topDown").show();//光标移入时触发
          },
         function(){
	 $(".topDown").hide();//光标移出时触发
         }
);

toggle()方法用于模拟鼠标连续click事件
方法一
语法

toggle(fn1,fn2,...,fnN)；

示例：

$("input").toggle(
        function(){$("body").css("background","#ff0000");},
         function(){$("body").css("background","#00ff00");},
          function(){$("body").css("background","#0000ff");}
    )

方法二
toggle()方法不带参数，与show( )和hide( )方法作用一样
语法：

toggle( );

示例：

$("input").click(function(){$("p").toggle();})

语法：

toggleClass(className);

示例：

$("input").click(function(){$("p").toggleClass("red");})

小结

*toggle( )和toggleClass( )总结
*toggle( fn1,fn2...)实现单击事件的切换，无须额外绑定click事件
*toggle( )实现事件触发对象在显示和隐藏状态之间切换
*toggleClass( )实现事件触发对象在加载某个样式和移除某个样式之间切换

总结：