小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
前言
吃饱饭才有力气写代码~
鼠标大家应该都很熟悉啦~今天就学习一下我们的主要定位设备鼠标相关的事件
一.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