mouseenter & mouseleave VS mouseover & mouseout

mouseenter/mouseleave 和 mouseover/mouseout的本质区别网上讲得比较多，但各种解释看得云里雾里，经过试验，他们的区别 it differs in that it doesn't bubble and that it isn't sent when the pointer is moved from one of its descendants' physical space to its own physical space 引自mozilla.org

上面这句英文用不同的颜色区分以断句，方便理解。本质还是体现在冒泡上。

可以通过下面两个例子加深印象，测试环境Firefox+Firebug。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>mouseenter & mouseleave</title>
  <style>
    div{position:absolute;}
  </style>
 </head>
 <body>
    <div id="div1" style="height:100px;border:1px solid red" onmouseenter="console.log('enter div1');" onmouseleave="console.log('leave div1');">
         div1 div1 div1 div1 div1 div1 div1 div1
        <div id="div2" style="left:50px;height:200px;border:1px solid red" onmouseenter="console.log('enter div2');" onmouseleave="console.log('leave div2');">
            div2 div2 div2 div2 div2 div2 div2 
            <div id="div3" style="left:100px;height:300px;border:1px solid red" onmouseenter="console.log('enter div3');" onmouseleave="console.log('leave div3');">
                 div3 div3 div3 div3 div3 div3 div3 div3
            </div>
        </div>
    </div>
 </body>
</html>

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title>mouseover & mouseout</title>
  <style>
    div{position:absolute;}
  </style>
 </head>
 <body>
    <div id="div1" style="height:100px;border:1px solid red" onmouseover="console.log('over div1');" onmouseout="console.log('out div1');">
         div1 div1 div1 div1 div1 div1 div1 div1
        <div id="div2" style="left:50px;height:200px;border:1px solid red" onmouseover="console.log('over div2');" onmouseout="console.log('out div2');">
            div2 div2 div2 div2 div2 div2 div2 
            <div id="div3" style="left:100px;height:300px;border:1px solid red" onmouseover="console.log('over div3');" onmouseout="console.log('out div3');">
                 div3 div3 div3 div3 div3 div3 div3 div3
            </div>
        </div>
    </div>
 </body>
</html>

参考文献:

http://www.cnblogs.com/libmw/articles/2600747.html 

posted @ 2012-09-25 20:16  Kai.Ma  阅读(446)  评论(0)  编辑  收藏  举报