onmousemove 、onmouseover 区别
onmousemove 是鼠标在元素上移动时触发，且在元素上每移动一下就会触发一次。
onmouseover 是鼠标移入元素时触发一次，再次在元素上移动时不会触发，但是鼠标移入元素内的子元素时也会触发（冒泡）
onmouseenter 仅鼠标移入时，触发一次，且不冒泡
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> div { width: 150px; height: 100px; border: 1px solid black; margin: 10px; float: left; padding: 30px; text-align: center; background-color: lightcoral; } p { background-color: white; } </style> </head> <body> <h3>该实例演示了 onmousemove, onmouseenter 和 onmouseover 的不同。</h3> <p>onmousemove 是鼠标在元素上移动时触发，且在元素上每移动一下就会触发一次。 </p> <p>onmouseover 是鼠标移入元素时触发一次，再次在元素上移动时不会触发，但是鼠标移入元素内的子元素时也会触发（冒泡） </p> <p>onmouseenter仅鼠标移入时，触发一次，且不冒泡 </p> <hr> <div onmousemove="myMoveFunction()"> 父元素<p>onmouseenter: <br> <span id="demo">子元素</span></p> </div> <div onmouseenter="myEnterFunction()"> 父元素<p>onmouseenter: <br> <span id="demo2">子元素</span></p> </div> <div onmouseover="myOverFunction()"> 父元素<p>onmouseover: <br> <span id="demo3">子元素</span></p> </div> </body> <script> var x = 0,y = 0,z = 0; function myMoveFunction() { console.log('====') document.getElementById("demo").innerHTML = z+=1; } function myEnterFunction() { document.getElementById("demo2").innerHTML = x+=1; } function myOverFunction() { document.getElementById("demo3").innerHTML = y+=1; } </script> </html> <!DOCTYPE html>