JavaScript鼠标事件细讲：执行顺序+注意事项+区别比对

原创

周陆军博客

发布于 2023-05-07 22:10:41

3.9K00

代码可运行

文章被收录于专栏：前端博客前端博客

运行总次数：0

代码可运行

在 JavaScript 中，鼠标事件是 Web 开发中最常用的事件类型，本篇算是笔记吧。

鼠标事件：

在DOM2.0中，W3C对鼠标事件作了现范，鼠标事件被解析为MouseEvent（我们可以用e.constructor == MouseEvent来判断其是否为鼠标事件。

常见的鼠标事件有

click：单击鼠标左键时发生。当用户的焦点在按钮上并按了 Enter 键时，同样会触发这个事
dblclick：双击鼠标左键时发生，如果右键也按下则不会发生
contextmenu ：弹出右键菜单。
focus：获取焦点
blur：失去焦点
mouse事件

click、dblclick 没有什么好讲的，contextmenu用的也不多讲。重点讲下mouse事件。

focus跟blur不是鼠标事件，但是也是由鼠标触发。focus跟blur的 e.constructor 为FocusEvent

Mouse事件

Mouse事件有7种，分别是：

mouseup：鼠标在元素上松开时触发 mouseup 事件。与 click 不同，只要鼠标在元素上松开即触发（左右键都行）。
mousedown：鼠标在元素上并按下时触发 mousedown 事件。与 click 不同，只要鼠标在元素上按下即触发（左右键都行）。
mouseover：当鼠标位于元素上时触发 mouseover 事件，通常与 mouseout 配合使用。
mouseenter：当鼠标位于元素上时触发 mouseenter 事件，通常与 mouseleave 配合使用。
mousemove：鼠标在元素上移动时触发 moudemove 事件。
mouseout：鼠标在元素上移开时触发 mouseout 事件。
mouseleave：鼠标在元素上移开时触发 mouseleave 事件。

mouseenter/mouseover

mouseover(鼠标覆盖)：当鼠标移入元素或其子元素都会触发事件，所以有一个重复触发，冒泡过程。对应的移除事件是mouseout
mouseenter(鼠标进入)：当鼠标移入元素本身（不包含元素的子元素）会触发事件，也就是不会冒泡，对应的移除事件是mouseleave

mouseenter/mouseover区别点：

mouseenter不会冒泡,简单的说,它不会被它本身的子元素的状态影响到.
mouseover就会被它的子元素影响到,在触发子元素的时候,mouseover会冒泡触发它的父元素.(想要阻止mouseover的冒泡事件就用mouseenter)

mouseenter/mouseover共同点:

当二者都没有子元素时,二者的行为是一致的,但是二者内部都包含子元素时,行为就不同了.

总结就是：

mouseover和mouseenter的异同体现在两个方面：

是否支持冒泡
事件的触发时机

可见mouseover事件因其具有冒泡的性质，在子元素内移动的时候，频繁被触发，如果我们不希望如此，可以使用mouseenter事件代替之，但是早期只有ie浏览器支持该事件。

结合其对称事件, mouseleave, mouseenter DOM事件的行为方式与CSS :hover 伪类非常相似。

还有就是：mouseover先触发，mouseenter 后触发。离开时，却是 mouseout 先触发，mouseleave后触发

鼠标事件执行顺序

下来看下面代码

<html>
<head>
    <title>dsafsa</title>
</head>
<body>
    <input id="test" style="width: 100px;height: 100px;border: 1px solid #ccc;"></input>
    <script>
    let test = document.getElementById('test')
    test.addEventListener('mousedown',()=>console.log('mousedown'))
    test.addEventListener('mouseover',()=>console.log('mouseover'))
    test.addEventListener('mouseenter',()=>console.log('mouseenter'))
    test.addEventListener('mouseup',()=>console.log('mouseup'))
    test.addEventListener('focus',()=>console.log('focus'))
    test.addEventListener('blur',()=>console.log('blur'))
    test.addEventListener('mousemove',()=>console.log('mousemove'))
    test.addEventListener('mouseleave',()=>console.log('mouseleave'))
    test.addEventListener('mouseout',()=>console.log('mouseout'))
    test.addEventListener('click',()=>console.log('click'))
    test.addEventListener('touchstart',()=>console.log('touchstart'))
    test.addEventListener('touchmove',()=>console.log('touchmove'))
    test.addEventListener('touchend',()=>console.log('touchend'))
    </script>
</body>
</html>

看看结果如何