使用mouseover会产生冒泡事件结合onmouseout一起使用
控制台里面的小盒子也会触发大盒子的事件这叫冒泡事件，所以使用mouseover会产生冒泡事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{ width: 300px; height: 300px; background-color: brown; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } #box2{ width: 100px; height: 100px; background-color: blueviolet; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> <script> box1.addEventListener("mouseover",function(){ console.log("被触发"); }); </script> </body> </html>
鼠标经过小盒子时不会被触发
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box1{ width: 300px; height: 300px; background-color: brown; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } #box2{ width: 100px; height: 100px; background-color: blueviolet; position: absolute; left: 50%; top: 50%; transform: translateY(-50%) translateX(-50%); } </style> </head> <body> <div id="box1"> <div id="box2"></div> </div> <script> box1.addEventListener("mouseenter",function(){ console.log("被触发"); }); </script> </body> </html>