鼠标事件mouseover和mouseenter的区别解析

背景

通过了解鼠标事件mouseover和mouseenter的区别，可以帮助我们更好地理解和使用这些事件来实现交互效果。

正文

定义

• mouseover ：当鼠标指针移动到元素及其子元素上时触发。
• mouseenter ：当鼠标指针首次进入元素时触发。

事件冒泡

• mouseover 事件会冒泡，这意味着如果鼠标指针从父元素移动到子元素，mouseover 事件将在父元素和子元素上触发。
• mouseenter 事件不会冒泡，这意味着如果鼠标指针从父元素移动到子元素，mouseenter 事件只会子元素上触发。

代码执行结果

<div id="parent">
  <div id="child"></div>
</div>

<script>
  document.getElementById("parent").addEventListener("mouseover", function() {
    console.log("Parent mouseover");
  });

  document.getElementById("child").addEventListener("mouseover", function() {
    console.log("Child mouseover");
  });

  document.getElementById("parent").addEventListener("mouseenter", function() {
    console.log("Parent mouseenter");
  });

  document.getElementById("child").addEventListener("mouseenter", function() {
    console.log("Child mouseenter");
  });
</script>

执行结果：

Parent mouseover
Child mouseover
Child mouseenter

事件传播

• mouseover 事件使用捕获传播，这意味着事件从父元素传播到子元素。
• mouseenter 事件使用冒泡传播，这意味着事件从子元素传播到父元素。

代码执行结果

<div id="parent">
  <div id="child"></div>
</div>

<script>
  document.getElementById("parent").addEventListener("mouseover", function() {
    console.log("Parent mouseover");
  }, true);

  document.getElementById("child").addEventListener("mouseover", function() {
    console.log("Child mouseover");
  }, true);

  document.getElementById("parent").addEventListener("mouseenter", function() {
    console.log("Parent mouseenter");
  }, true);

  document.getElementById("child").addEventListener("mouseenter", function() {
    console.log("Child mouseenter");
  }, true);
</script>

执行结果：

Parent mouseover
Child mouseover
Child mouseenter
Parent mouseenter

性能

• mouseover 事件的性能开销比 mouseenter 事件高，因为 mouseover 事件需要在每个元素上触发，而 mouseenter 事件只在元素本身触发。

总结

• mouseover 事件在鼠标指针移动到元素及其子元素上时触发，而 mouseenter 事件在鼠标指针首次进入元素时触发。
• mouseover 事件会冒泡，而 mouseenter 事件不会冒泡。
• mouseover 事件使用捕获传播，而 mouseenter 事件使用冒泡传播。
• mouseover 事件的性能开销比 mouseenter 事件高。

希望这篇文章能够帮助您更好地理解鼠标事件 mouseover 和 mouseenter 的区别。