JavaScript鼠标事件细讲：执行顺序+注意事项+区别比对
Author：[email protected] Date：
在 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>看看结果如何
PC端
打印顺序为：
mouseover-》mouseenter-》mousemove-》-》mousedown-》focus-》-》mouseup-》click-》mousemove-》mouseout-》mouseleave-》blur
移动端：
tochstart -》touchend-》click
这个是普通html元素。但是如果是input呢？
需要注意的是：移动端，普通元素是不会触发 focus 与blur的，只有表单元素才会触发，如input输入框
执行顺序是 tochstart -》touchend-》-》mousedown-》focus-》mouseup-》click-》blur
mousedown、mouseup、click
若在同一个元素上按下并松开鼠标左键，会依次触发mousedown、mouseup、click，前一个事件执行完毕才会执行下一个事件
若在同一个元素上按下并松开鼠标右键，会依次触发mousedown、mouseup，前一个事件执行完毕才会执行下一个事件，不会触发click事件
鼠标按键
mousedown左右键按操按下均可触发，那么怎么区分左右键呢？
是左键点击还是右键点击由它的一个叫button的属性判定。以下就是W3C的标准现范：
按下左键
按下中键
按下右键
当然微软是不会妥协的，因为e.button本来就是微软最先实现的，网景用的是e.which，但相对而言，微软的复杂多了。
0：没有键被按下
1：按下左键
2：按下右键
3：左键与右键同时被按下
4：按下中键
5：左键与中键同时被按下
6：中键与右键同时被按下
7：三个键同时被按下
参考文章：
JS鼠标事件（非常详细） http://c.biancheng.net/view/5944.html
mouseover和mouseenter的区别 https://www.cnblogs.com/psxiao/p/11543333.html
javascript 鼠标事件总结 https://www.cnblogs.com/rubylouvre/archive/2009/08/24/1552862.html
转载本站文章《JavaScript鼠标事件细讲：执行顺序+注意事项+区别比对》,
请注明出处：https://www.zhoulujun.cn/html/webfront/ECMAScript/js/2016_0106_384.html