mouseenter事件和mouseover事件

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title></title>
 6     </head>
 7     <body>
 8         <ul id="ul">
 9             <li>1</li>
10             <li>2</li>
11             <li>3</li>
12             <li>4</li>
13         </ul>
14         <script>
15             document.getElementById('ul').addEventListener('mouseover', function(e){
16                 console.log(e.target.nodeName);
17                 if(e.target && e.target.nodeName.toUpperCase() == 'LI'){
18                     console.log('over');
19                 }
20             }, false);
21             document.getElementById('ul').addEventListener('mouseenter', function(e){
22                 console.log(e.target.nodeName);
23                 if(e.target && e.target.nodeName.toUpperCase() == 'LI'){
24                     console.log('enter');
25                 }
26             }, false);
27         </script>
28     </body>
29 </html>

如上代码所示，对相同的标签分别绑定mouserover和mousenter事件，鼠标移到li，结果显示：

触发mouseover事件时，控制台输出LI和over，说明mouseover会冒泡；

触发mouseenter事件时，控制台只输出UL，说明mouseenter不会冒泡；

做JavaScript事件委托时，要用到鼠标移动事件，mouseenter和mouseleave貌似不太好。