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貌似不太好。