鼠标移入事件 #程序员 鼠标移动事件代码

鼠标移入事件。

1. 角色中有两个鼠标移入事件，分别是 mouseover 和 mouseenter，这两个事件都会在鼠标进入目标元素时被触发。

2. 虽然看起来非常相似，但是它们之间也有一些重要的区别，了解清楚这些区别可以有助于在不同的场景当中选择更加合适的事件进行使用。具体如下：

- 首先 mouseover 会在鼠标指针进入目标元素或者是进入其子元素的时候被触发，而且 mouseover 事件会冒泡，也就是当父元素和子元素都绑定该事件，在触发子元素 mouseover 事件的时候由于事件冒泡，父元素当中的 mouseover 也会自动触发。

- 而 mouseenter 事件只有在鼠标进入目标元素时才会被触发，并不会因为进入其子元素而再次触发。而且 mouseenter 事件不会冒泡，也就是当父子元素都绑定该事件，在触发子元素 mouseenter 事件时并不会自动触发父元素中的 mouseenter。

3. 比如有这样的一组嵌套结构，外层是父元素，内部是子元素。当为父元素绑定 mouseover 事件的时候，鼠标移入父元素时会触发一次，当继续移入子元素时会再次触发。而如果父元素中绑定的是 mouseenter 事件，鼠标移入父元素的时候触发一次，但是当鼠标继续移入子元素时并不会再次触发。如果为子元素同时绑定相同事件，在触发子元素的 mouseover 时会同时触发父元素的 mouseover 事件，而触发子元素的 mouseenter 事件并不会触发父元素中的 mouseenter 事件。

4. 基于这些区别，mouseover 事件就会更适用于父子元素都需要执行某些操作的情况，而 mouseenter 则适用于只在目标元素本身执行某些操作。

你学会了吗？