简写事件(二)

   基础事件(一)封装的大部分方法都比较好理解，我们也演示确认一部分，现在重点看几个需要注意区分的简写方法。

   .mouseover()和.mouseout()表示鼠标移入和移出的时候触发，那么jQuery还封装了另外一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢？手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，而.mouseover()和.mouseout()则会触发。

   有html代码如下：

   jQuery代码如下：

$("div").mouseover(function() {    $(this).css("background", "red");}).mouseout(function() {    $(this).css("background", "green");});

$("div").mouseenter(function() {    $(this).css("background", "red");}).mouseleave(function() {    $(this).css("background", "green");});

   发现以上两句代码达到的效果无差别，那么这两组本质上有什么区别呢？

   有html代码如下：

   mouseover移入，会触发子节点。

//移入div会触发，移入p再触发$("div").mouseover(function() { //mouseover会触发子节点    $("strong").html(function(index, value) {        return value + "1";    });});

   mouseenter穿过，不会触发子节点。

//穿过div或者p，在这个区域只触发一次$("div").mouseenter(function() { //mouseenter不会触发子节点    $("strong").html(function(index, value) {        return value + "1";    });});

   mouseout移出，会触发子节点。

//移出p会触发，移出div再触发$("div").mouseout(function() { //mouseout会触发子节点    $("strong").html(function(index, value) {        return value + "1";    });});

   mouseleave穿出，不会触发子节点。

//移出整个div区域触发一次$("div").mouseleave(function() { //mouseleave不会触发子节点    $("strong").html(function(index, value) {        return value + "1";    });});

   再看如下html(部分)代码：

   jQuery代码如下：

$("input").keydown(function() {    alert("键盘按下");});$("input").keyup(function() {    alert("键盘弹起");});

   .keydown()、.keyup()返回的是键码，而.keypress()返回的是字符编码。

$("input").keydown(function(e) {    alert(e.keyCode); //按下a返回65});$("input").keypress(function(e) {    alert(e.charCode);  //按下a返回97，若为keyCode，将返回0});

   注意：e.keyCode和e.charCode在两种事件互换也会产生不同的效果，除了字符还有一些非字符键的区别。

   .focus()和.blur()分别表示光标激活和丢失，事件触发时机是当前元素。而.focusin()和.focusout()也表示光标激活和丢失，但事件触发时机可以是子元素。

   有html代码如下：

   jQuery代码：

$("input").focus(function() {    alert("光标激活");});    $("input").blur(function() {    alert("光标丢失");});

   效果等同于：

$("input").focusin(function() {    alert("光标激活");});$("input").focusout(function() {    alert("光标丢失");});

$("div").focus(function() { //focus和blur必须是当前元素才能激活    alert("光标激活"); //所以不会弹出});

$("div").focusin(function() { //focusin和focusout可以使子元素激活    alert("光标激活");});$("div").focusout(function() {     alert("光标丢失");});

   注意：.blur()和.focusout()表示光标丢失，和激活类似，一个必须当前元素触发，一个可以是子元素触发。

   复合事件

   jQuery提供了许多最常用的事件效果，组合一些功能实现了一些复合事件，比如切换功能、智能加载等。

方法名	描述
ready(fn)	当DOM加载完毕触发事件
hover([fn1,]fn2)	当鼠标移入触发第一个fn1，移出触发fn2
toggle(fn1,fn2[,fn3...])	已废弃，当鼠标点击触发fn1，再点击触发fn2...

   html代码不变同上。

   jQuery代码如下：

//背景移入移出切换效果$("div").hover(function() {    $(this).css("background", "red");}, function() {    $(this).css("background", "green");});

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

   .toggle()这个方法比较特殊，这个方法有两层含义，第一层含义就是已经被1.8版废用、1.9版删除掉的用法，也就是点击切换复合事件的用法。第二层含义将会在动画那章讲解到。既然废弃掉了，就不应该使用，被删除的原因是：以减少混乱和提高潜在的模块化程度。

   但你又非常想用这个方法，并且不想自己编写类似的功能，可以下载jquery-migrate.js文件，来向下兼容已被删除掉的方法。

   如，html代码：

   jQuery代码：

$("div").toggle("slow"); //动画那章将讲解到

//背景点击切换效果(1.9版删除掉了)$("div").toggle(function() {    $(this).css("background", "red");}, function() {    $(this).css("background", "blue");}, function() {    $(this).css("background", "green");});

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

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