js中常用的鼠标事件介绍

---

---

前言

对于刚入门的前端程序员来说，js中较为重要的鼠标事件是一个重点记忆的内容，本文主要针对几个常用的鼠标事件做简单讲解，主要包括定义和使用场景。

---

1.click鼠标点击事件

  鼠标点击事件是我们在开发中最为常用的，当鼠标点击绑定点击事件的标签就会触发

  示例：定义一个div盒子，绑定点击事件后，点击后背景颜色变为红色

效果展示：

 

---

2.mouseover和mouseenter鼠标经过事件

鼠标经过事件是指鼠标一经过就会触发的事件，我会将鼠标经过时的cursor属性改为pointer，对于两者的不同，over不仅经过自身会触发，经过子元素也会触发自身，enter只会经过自身触发

示例：准备两个div盒子，两者为父子关系，鼠标经过后控制台打印数字121

mouseover：

mouseenter：

展示效果： 

mouseover：经过子盒子也会触发父盒子绑定的经过事件

mouseenter：经过子盒子不会触发父盒子绑定的经过事件

---

 3.mouseout和mouseleave鼠标离开事件

鼠标离开事件是指鼠标先经过这个标签，然后再离开就会触发的事件，对于两者的不同，和mouseover与mouseenter一样，都是子元素能否触发父元素的问题，mouseout的子元素可以触发父元素绑定的事件，而mouseleave的子元素不能触发父元素绑定的事件，因此在此处不做展示。

---

4.focus鼠标获得焦点事件和blur失去焦点事件

该事件多用于输入内容的文本框，获得光标就会触发focus事件，失去光标就会触发blur事件，两者效果经常相反。

示例：准备一个input文本框和一个div盒子，获得焦点后盒子变色，失去焦点后盒子变回原来的颜色

展示效果：input获得焦点后盒子变成红色，而失去焦点后盒子变回黑色

 

---

5.mousemove鼠标移动事件

mousemove事件是鼠标在页面移动一像素就会触发的事件，关键点是该元素得带有定位position，多用于document标签，使用场景多为图片跟随鼠标做成动画效果

示例：鼠标在页面移动，一个div盒子跟随鼠标的效果

展示效果：盒子跟随鼠标移动

  

---

6.mousedown鼠标按下事件和mouseup鼠标松开事件

mousedown是鼠标按下时就会触发的事件，与click点击事件不同，点击是包括两个动作，按下鼠标后立即松开鼠标，如果一个元素同时绑定了这两种事件，那么mousedown会先触发，mouseup是鼠标按下后，松开鼠标按键这个动作会触发的事件，一定是先有按下动作的存在，然后才有松开动作的出现。两者多配合mousemove使用于网页一些元素的拖拽事件

示例：按下鼠标选中一段文字，盒子变色，松开鼠标后，盒子变回原来的颜色

展示效果：按下鼠标选中文字后盒子变红色，松开鼠标后，盒子变黑色

---

7.contextmenu鼠标右键菜单事件和selectstart鼠标选中事件

这两个事件顾名思义，是指对这个元素的内容能否打开鼠标右键菜单和鼠标能否选中该元素的内容通常搭配鼠标事件对象的preventDefault方法使用，该方法能够阻止打开菜单和选中功能，多使用于网页中用户不能操作的内容

示例：展示一段文字，既不能打开右键菜单也不能选中

展示效果：

（1）没有绑定事件前

（2）绑定事件后

---

总结

    好啦，以上就是今天要讲的内容，围绕了几个常见的鼠标事件做了点介绍，将几个相反效果事件和相同效果事件连在一起讲，我个人认为比较容易记住，像我的话，移动事件的元素一定要加定位才能改变坐标在我写文章之前忘记了，现在相当于复习了一遍，感觉写这个的时候，我是有收获的，希望看到这的你也能够有所收获，当然，如果文章有问题，欢迎在评论区告诉我，也欢迎在评论区讨论，希望大家的未来一片光明！