mouserover和mouseenter事件和冒泡事件
鼠標(biāo)自上劃到下, mouseover次數(shù):1, mouseover冒泡次數(shù):6; mouseenter次數(shù):2, mouseenter冒泡次數(shù): 7 ?
鼠標(biāo)單獨(dú)移入.mouseenter()方法塊, ?mouseenter次數(shù):1, mouseenter冒泡次數(shù):1
提問: ?
1. i, n在兩個(gè)<script>中不是都初始為零了? 為什么會(huì)疊加?
2. mouseenter和mouserover的冒泡事件和事件的區(qū)別就是function括號(hào)里面是否有e?
3. mouseenter的冒泡事件和事件的效果相同?
4. mouseover的冒泡事件相當(dāng)于自己就能夠?qū)崿F(xiàn)移入和移出?
<!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>鼠標(biāo)離開此區(qū)域觸發(fā)mouseover事件</p>
????????????<a>mouseover事件觸發(fā)次數(shù)：</a><br/>
????????????<a>mouseover冒泡事件觸發(fā)次數(shù)：</a>
????????</div>
????</div>
????<h2>.mouseenter()方法</h2>
????<div?class="right">
????????<div?class="aaron2">
????????????<p>鼠標(biāo)進(jìn)入此區(qū)域觸發(fā)mouseenter事件</p>
????????????<a>mouseenter事件觸發(fā)次數(shù)：</a><br/>
????????????<a>mouseenter冒泡事件觸發(fā)次數(shù)：</a>
????????</div>
????</div>
????<br/>
???
????
????<script?type="text/javascript">
????????var?i?=?0;
????????$(".aaron1?p").mouseover(function(e)?{
????????????$(".aaron1?a:first").html('mouseover事件觸發(fā)次數(shù)：'?+?(++i))
????????})
????????var?n?=?0;
????????$(".aaron1").mouseover(function()?{
????????????$(".aaron1?a:last").html('mouseover冒泡事件觸發(fā)次數(shù)：'?+?(++n))
????????})
????</script>
????<script?type="text/javascript">
????????var?i?=?0;
????????$(".aaron2?p").mouseenter(function(e)?{
????????????$(".aaron2?a:first").html('mouseenter事件觸發(fā)次數(shù)：'?+?(++i))
????????})
????????var?n?=?0;
????????$(".aaron2").mouseenter(function()?{
????????????$(".aaron2?a:last").html('mouseenter冒泡事件觸發(fā)次數(shù)：'?+?(++n))
????????})
????</script>
</body>
</html>
2016-11-10
1,疊加是因?yàn)閕和n都在自增;
2,冒泡跟函數(shù)傳參不是一回事,mouseenter是只對(duì)自己進(jìn)行移出,他的父元素對(duì)這個(gè)移出不接收,例如上面p在div內(nèi),p和div如果都有mouseover的話,你從上到下劃過應(yīng)該是進(jìn)入div,div就是一次,進(jìn)入p了,p算一次,div也算一次,這個(gè)就是冒泡了,但是如果p是mouseenter,進(jìn)入p,就只算p一次,不會(huì)冒泡給DIV也算一次.
3,mouseenter不會(huì)產(chǎn)生冒泡事件.所以不存在冒泡事件與事件相同.
4,mouseover只有移入效果,2.6的例子上如第一個(gè)P的計(jì)數(shù),你只有移入p的時(shí)候他才計(jì)算,你移出他p本身不計(jì)數(shù).
2016-11-03
mouseenter與mouseleave事件（mouseenter（）事件與mouseover（）事件類似但是mouseover事件會(huì)引起冒泡事件，即如果在p元素與div元素都綁定mouseover事件，鼠標(biāo)在離開p元素，但是沒有離開div元素的時(shí)候，觸發(fā)的結(jié)果:p元素響應(yīng)事件，div元素也響應(yīng)事件，那么div元素響應(yīng)事件就是由于mouseover事件的冒泡特性引起的，然而mouseenter事件就不會(huì)引起冒泡事件）