您的位置：首页 > 其它

基础事件(二)

2016-04-23 23:37 337 查看
简写事件(二)

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

.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;
}
});
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航