mouserover和mouseenter事件和冒泡事件
鼠標自上劃到下, 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>
2016-11-10
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本身不計數.
2016-11-03
mouseenter與mouseleave事件（mouseenter（）事件與mouseover（）事件類似但是mouseover事件會引起冒泡事件，即如果在p元素與div元素都綁定mouseover事件，鼠標在離開p元素，但是沒有離開div元素的時候，觸發的結果:p元素響應事件，div元素也響應事件，那么div元素響應事件就是由于mouseover事件的冒泡特性引起的，然而mouseenter事件就不會引起冒泡事件）