鼠标和滚轮事件

221 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

前言

吃饱饭才有力气写代码~

鼠标大家应该都很熟悉啦~今天就学习一下我们的主要定位设备鼠标相关的事件

一.click事件

在用户单击鼠标主键(通常是鼠标左键)或者按键盘回车键时触发,这主要是基于无障碍考虑,让键盘和鼠标都可以触发onclick事件处理程序。

二.dblclick事件

在用户双击鼠标主键(通常是左键)时触发,这个事件不是在DOM2 Events中定义的,但是得到了很好的支持,后来在DOM3 Events对其进行了标准化。

三.mousedown

在用户按下任意鼠标键时触发,这个事件不能通过键盘触发。

四.mouseenter

在用户把鼠标光标从元素外部移动到元素内部时触发,这个事件不冒泡,也不会在光标经过后代元素时触发。mouseenter事件也是在DOM3 Events中新增的事件。

五.mouseleave

在用户把鼠标光标从元素内部移动到元素外部时触发,和mouseenter一样,不冒泡,也不会在光标经过后代元素时触发。

六.mousemove

在鼠标光标在元素上反复移动时触发,这个事件不能通过键盘触发。

七.mouseout

在用户把鼠标光标从一个元素移动到另一个元素上时触发,移动的元素可以是原始元素的外部元素,也可以是原始元素的子元素,这个事件不能通过键盘触发。

八.mouseover

在用户把鼠标光标从元素外部移动到元素内部时触发,它同样不能通过键盘触发。

九.mouseup

在用户释放鼠标时触发,也不能通过键盘触发。

鼠标事件之间的关系会互相影响

页面中的所有元素都支持鼠标事件,除了mouseenter和mouseleave,所有的鼠标事件都会冒泡也都可以被取消,这也会影响浏览器的默认行为。
比如:click事件触发的前提是mousedown事件触发后紧接着又在同一个元素上触发了mouseup事件,如果mousedown和mouseup事件中的任意一个事件被取消,那么click事件就不会被触发。
类似地,两次连续的click事件会导致dblclick事件触发,只要有任何逻辑阻止了这两个click事件发生(例如取消了其中一个click事件或者取消mousedown和mouseup中的任意一个),dblclick事件就不会发生,这4个事件永远会按照如下顺序触发:
mousedown
mouseup
click
mousedown
mouseup
click
dblclick

鼠标事件还有一个叫做滚轮事件的子类别,明天接着学习~