<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>鼠标经过事件的区别</title>
</head>
<style>.dad {width: 400px;height: 400px;background-color: pink;}.son {width: 200px;height: 200px;background-color: purple;}
</style><body><div class="dad"><div class="son"></div></div><script>const dad = document.querySelector('.dad')const son = document.querySelector('.son')dad.addEventListener('mouseenter', function () {console.log('鼠标经过')})dad.addEventListener('mouseout', function () {console.log('鼠标离开')})</script>
</body></html>