mouseEnter和mouseOver

`mouseenter` 和 `mouseover` 事件都是用于检测鼠标在元素上的操作。它们的主要区别在于事件的触发机制：

### mouseenter vs mouseover

- **mouseover**：当鼠标移动到元素及其子元素范围内时都会触发该事件。这意味着如果鼠标从父元素移到其内部的某个子元素上，`mouseover` 事件会在子元素上重复触发。

- **mouseenter**：只会在元素自身被鼠标悬停时触发一次。不会因鼠标移动到元素内部的子元素而重复触发事件。`mouseenter` 更适合于需要精确控制事件范围的情况。

### 示例代码

假设我们有一个HTML结构如下：

<div id="parent">
    <p>Text inside parent</p>
</div>

并添加JavaScript代码来展示两个事件的不同行为：

document.getElementById('parent').addEventListener('mouseover', function(event) {
    console.log(1); // 输出1
});

document.getElementById('parent').addEventListener('mouseenter', function(event) {
    console.log(2); // 输出2
});

document.getElementById('parent').addEventListener('mousemove', function(event) {
    console.log(3); // 输出多次，因为mouseover也会在此处触发
});

document.getElementById('parent').addEventListener('mouseout', function(event) {
    console.log(4); // 当鼠标离开整个元素时触发
});

document.getElementById('parent').addEventListener('mouseleave', function(event) {
    console.log(5); // 当鼠标离开整个元素时触发，与mouseout不同的是，它不考虑子元素
});

### 执行顺序：

1. 鼠标移动到元素上 -> `mouseenter`, `mousemove` (多次)
2. `mouseover` (多次)
3. `mousemove` (继续多次)
4. 鼠标离开元素 -> `mouseout`, `mouseleave`

### 相关问题:

1. 如何在 `mouseenter` 或者 `mouseover` 中仅处理一次事件而不让它重复触发？
2. `mouseleave` 和 `mouseout` 之间有什么区别？
3. 为什么选择使用 `mouseenter` 而不是 `mouseover`？