03jQurey之事件（鼠标事件、键盘事件、绑定事件与移除事件、复合事件）

鼠标事件：

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

示例：

$(".nav-ul a").mouseover(function(){//鼠标移入
	$(this).css("background-color","#f01e28");
});
$(".nav-ul a").mouseout(function(){//鼠标移出
	$(this).css("background-color","#ff2832");
});

键盘事件：

用户每次按下或者释放键盘上的键时都会产生事件，常用键盘事件。

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

示例：

 $("[type=password]").keyup(function () {
	$("#events").append("keyup");
      }).keydown(function (e) {
	$("#events").append("keydown");
      }).keypress(function () {
	$("#events").append("keypress");
     });
$(document).keydown(function (event) {
	 if (event.keyCode == "13") {
		alert("确认要提交么？");
	}
});

绑定事件与移除事件：

• 绑定事件：

语法：

bind(type,[data],fn);

• type：事件类型，主要包括click、mouseover、mouseout等基础事件，此外，还可以是自定义事件。
• data：可选函数
• fn：处理函数

特点：

1. 绑定单个事件
2. 同时绑定多个事件

示例：

1. 绑定单个事件

使用绑定实现鼠标移至“我的当当”显示二级菜单

示例：

$(document).ready(function(){
	$(".on").bind("mouseover",function(){
		$(".topDown").show();
	});
});

2. 绑定多个事件

使用绑定多个事件实现“我的当当” 二级菜单的显示和隐藏

示例：

$(".top-m .on").bind({//先执行鼠标移入事件，后执行鼠标移出事件
	mouseover:function(){
		$(".topDown").show();
	},
	mouseout:function(){
		$(".topDown").hide();
	}
});

• 移除事件：

移除事件使用unbind()方法

语法：

unbind([type],[fn])

• type：事件类型，主要包括：blur、focus、click、mouseout等基础事件，此外，还可以是自定义事件
• fn：处理函数

注意：当unbind()不带参数时，表示移除所绑定的全部事件

示例：

$("#del").click(function(){
        $("#nav li:first").unbind("click", content1)
});

复合事件：

1. hover( )方法
2. toggle( )方法

• hover( )方法：
  hover()方法相当于mouseover与mouseout事件的组合

语法：

hover(enter,leave);

示例：

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

• toggle( )方法(需要一定的版本，现在这个方法已经被淘汰了（需要jq版本在2.0以下）)
  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( )方法作用一样

语法：

toggleClass( )可以对样式进行切换
toggleClass(className);

示例：

1.直接添加样式：
	   $("input").click(function(){$("p").toggleClass("red");})
2.添加类样式：
	   <script type="text/javascript">
			$(function(){
				$("#aa").toggleClass("aaa");
			})
		</script>
		<style type="text/css">
			.aaa{
				width: 500px;
				height: 500px;
				background-color: aqua;
			}
		</style>