1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin: 0; 9 padding: 0; 10 } 11 .box{ 12 width: 300px; 13 height: 300px; 14 background: pink; 15 } 16 .inner{ 17 width: 100px; 18 height: 100px; 19 background: orange; 20 } 21 22 </style> 23 </head> 24 <body> 25 <div class="box"> 26 <div class="inner"></div> 27 </div> 28 <script type="text/javascript"> 29 var box = document.querySelector('.box'); 30 // //该对移入移除事件，如果移入到子元素，会事件委派到子元素 31 // box.onmouseover = function () { 32 // console.log('移入') 33 // } 34 // box.onmouseout = function () { 35 // console.log('移出') 36 // } 37 38 //该对移入移除事件父元素不会发生事件委派 39 box.onmouseenter = function () { 40 console.log('移入') 41 } 42 box.onmouseleave = function () { 43 console.log('移出') 44 } 45 </script> 46 47 </body> 48 </html>