假如有外层元素 p,其内有内层元素 s。我们现在希望的是:
鼠标仅在移入、移出 p 时触发事件,在移入、移出 s 时,不触发事件。
如果我们对 p 绑定 mouseover、mouseout 则不能简单地实现上述需求,因为在移入、移出 s 时,因为冒泡,也会触发 p 的事件。
使用 mouseenter、mouseleave 则可轻松实现。
更深入一步
(代码灵感来自网上)
<html> <head> <style type="text/css"> div { margin:100px; padding:0 100px; width:100px; height:100px; background:red; } div div { margin:0; padding:0; background:green; } </style> </head> <body> <div id="parent"> <div id="son"></div> </div> <script> window.onload = function() { let parent = document.getElementById("parent"); parent.addEventListener("mouseenter", ()=>console.log("p Enter")); parent.addEventListener("mouseleave", ()=>console.log("p Leave")); parent.addEventListener("mouseover", ()=>console.log("p Over")); parent.addEventListener("mouseout", ()=>console.log("p Out")); let son = document.getElementById("son"); son.addEventListener("mouseenter", ()=>console.log("s Enter")); son.addEventListener("mouseleave", ()=>console.log("s Leave")); son.addEventListener("mouseover", ()=>console.log("s Over")); son.addEventListener("mouseout", ()=>console.log("s Out")); } </script> </body> </html>
当鼠标由左向右滑动时,触发事件如下:
可以看出:
Enter、Leave 只针对本元素边缘,不涉及内层元素。
Over 先于 Enter 触发。我们改变事件绑定顺序,也是如此。
移入内层元素时,依次触发:
外层 Out
内层 Over
外层 Over(冒泡)
内层 Enter
移出内层元素时,依次触发:
内层 Out
外层 Out(冒泡)
内层 Leave
外层 Over