The different of mouseover and mouseenter
l论事件onmouseover 和 onmouseenter；同类比较onmouseout 和 onmouseleave;
使用onmouseover时，鼠标除了被设置事件的元素，还会触发其子元素； 而onmouseenter只会触发被设置了事件的元素，子元素不受影响。
支持度：mouseenter,mouseleavei IE8+的浏览器支持，safari 5不支持
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>mouseover 和 mouseenter的区别</title> 6 <style> 7 body{ 8 padding: 0; 9 margin: 0; } 10 #box1, 11 #box2{ 12 width: 300px; 13 height: 100px; 14 margin-top: 100px; 15 padding-top: 50px; 16 background: #f00; } 17 #box1 p, 18 #box2 p{ 19 width: 70%; 20 height: 50px; 21 line-height: 50px; 22 text-align: center; 23 background: #ccc; } 24 </style> 25 <script> 26 window.onload = function(){ 27 var box1 = document.getElementById("box1"); 28 var box2 = document.getElementById("box2"); 29 var num1 = document.getElementById("num1"); 30 var num2 = document.getElementById("num2"); 31 box1.onmouseover = function(){ 32 num1.innerHTML++; 33 } 34 box2.onmouseenter = function(){ 35 num2.innerHTML++; 36 } 37 } 38 </script> 39 </head> 40 <body> 41 <div id="box1"> 42 <p>事件mouseover: <span id="num1">1</span></p> 43 </div> 44 <div id="box2"> 45 <p>事件mouseenter: <span id="num2">1</span></p> 46 </div> 47 48 </body> 49 </html>
