基础事件(二)
简写事件(二)
基础事件(一)封装的大部分方法都比较好理解，我们也演示确认一部分，现在重点看几个需要注意区分的简写方法。
.mouseover()和.mouseout()表示鼠标移入和移出的时候触发，那么jQuery还封装了另外一组：.mouseenter()和.mouseleave()表示鼠标穿过和穿出的时候触发。那么这两组本质上有什么区别呢？手册上的说明是：.mouseenter()和.mouseleave()这组穿过子元素不会触发，而.mouseover()和.mouseout()则会触发。
有html代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div style="width: 200px; height: 200px; background-color: green;"> </div> </body> </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代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div style="width: 200px; height: 200px; background-color: green;"> <p style="width: 100px; height: 100px; background-color: red;"></p> </div> <strong></strong> </body> </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(部分)代码：
<input type="text" value="" />
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代码如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div style="width: 200px; height: 200px; background-color: green;"> <input type="text" value="" /> </div> <strong></strong> </body> </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代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>基础事件</title> <script type="text/javascript" src="jquery-1.12.3.js"></script> <script type="text/javascript" src="jquery-migrate-1.2.1.js"></script> <script type="text/javascript" src="demo.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <div style="width: 200px; height: 200px; background-color: green;"> <input type="text" value="" /> </div> <strong></strong> </body> </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; } });
