鼠标自上划到下, mouseover次数:1, mouseover冒泡次数:6; mouseenter次数:2, mouseenter冒泡次数: 7
鼠标单独移入.mouseenter()方法块, mouseenter次数:1, mouseenter冒泡次数:1
提问:
1. i, n在两个<script>中不是都初始为零了? 为什么会叠加?
2. mouseenter和mouserover的冒泡事件和事件的区别就是function括号里面是否有e?
3. mouseenter的冒泡事件和事件的效果相同?
4. mouseover的冒泡事件相当于自己就能够实现移入和移出?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<style>
.left div,
.right div {
width: 350px;
height: 150px;
padding: 5px;
margin: 5px;
border: 1px solid #ccc;
}
p{
height: 50px;
border: 1px solid red;
margin: 30px;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
<h2>.mouseover()方法</h2>
<div class="left">
<div class="aaron1">
<p>鼠标离开此区域触发mouseover事件</p>
<a>mouseover事件触发次数：</a><br/>
<a>mouseover冒泡事件触发次数：</a>
</div>
</div>
<h2>.mouseenter()方法</h2>
<div class="right">
<div class="aaron2">
<p>鼠标进入此区域触发mouseenter事件</p>
<a>mouseenter事件触发次数：</a><br/>
<a>mouseenter冒泡事件触发次数：</a>
</div>
</div>
<br/>
<script type="text/javascript">
var i = 0;
$(".aaron1 p").mouseover(function(e) {
$(".aaron1 a:first").html('mouseover事件触发次数：' + (++i))
})
var n = 0;
$(".aaron1").mouseover(function() {
$(".aaron1 a:last").html('mouseover冒泡事件触发次数：' + (++n))
})
</script>
<script type="text/javascript">
var i = 0;
$(".aaron2 p").mouseenter(function(e) {
$(".aaron2 a:first").html('mouseenter事件触发次数：' + (++i))
})
var n = 0;
$(".aaron2").mouseenter(function() {
$(".aaron2 a:last").html('mouseenter冒泡事件触发次数：' + (++n))
})
</script>
</body>
</html>1,叠加是因为i和n都在自增;
2,冒泡跟函数传参不是一回事,mouseenter是只对自己进行移出,他的父元素对这个移出不接收,例如上面p在div内,p和div如果都有mouseover的话,你从上到下划过应该是进入div,div就是一次,进入p了,p算一次,div也算一次,这个就是冒泡了,但是如果p是mouseenter,进入p,就只算p一次,不会冒泡给DIV也算一次.
3,mouseenter不会产生冒泡事件.所以不存在冒泡事件与事件相同.
4,mouseover只有移入效果,2.6的例子上如第一个P的计数,你只有移入p的时候他才计算,你移出他p本身不计数.
mouseenter与mouseleave事件（mouseenter（）事件与mouseover（）事件类似但是mouseover事件会引起冒泡事件，即如果在p元素与div元素都绑定mouseover事件，鼠标在离开p元素，但是没有离开div元素的时候，触发的结果:p元素响应事件，div元素也响应事件，那么div元素响应事件就是由于mouseover事件的冒泡特性引起的，然而mouseenter事件就不会引起冒泡事件）