click:点击鼠标左键或者按下回车键触发。onclick事件处理程序也同样可以通过这两个方式执行。
dblclick:DOM3级事件。双击鼠标左键。
mousedown:单击鼠标左键。
mouseup:松开单击着的鼠标左键。
(click包括按下与松开鼠标左键两个步骤,mousedown仅仅是按下鼠标左键操作,mouseout是松开鼠标左键操作。因此在鼠标操作上click=mousedown+mouseup)
mouseenter:鼠标光标从元素外部首次移动到元素范围之内时触发。该事件不冒泡,而且移动到后代元素上不触发。DOM3级事件。(IE、Firefox、Opera)
mouseleave:位于元素上方的鼠标光标移动到元素范围之外的时候触发。该事件不冒泡。光标移动到后代元素不触发。DOM3级事件。(IE、Firefox、Opera)
mousemove:鼠标在元素内部移动时重复地触发(大概可以做鼠标的炫彩效果)
mouseout:鼠标从一个元素移动到另一个元素时触发,该元素可以是原元素的外部元素或子元素。
mouseover:鼠标在元素外部,首次进入元素时,触碰到元素边界后触发。(和mouseenter差不多应该)
检测是否支持click、mousedown、mouseup、mousemove、mouseout、mouseover:
var isSupported=document.implementation.hasFeature("MouseEvents","2.0");
检测能否支持dblick、mouseenter、mouseleave:
var isSupported=document.implementation.hasFeature("MouseEvent","3.0");
1.客户区坐标位置
这个位置信息保存在事件对象的clientX,clientY属性中。所有浏览器均支持这两个属性。(event.clientX,event.clientY)
2.页面坐标位置
pageX,pageY属性。在页面没有滚动的情况下他们的值与clientX、clientY的值相等。
与客户区坐标位置的区别:
客户区坐标位置是相对于视口,即浏览器显示页面的窗口的顶部与最左边的距离。页面坐标位置相对于页面本身。页面滚动会造成它们俩的数值不一致。
3.屏幕坐标位置
screenX、screenY属性用于确定相对于整个电脑屏幕的距离。event.screenX,event.screenY。
4.修改键
修改键分别为:Shift、Ctrl、Alt、Meta(windows键盘中是windows键,MacOs中是Cmd键)。
分别对应:shiftKey、ctrlKey、altKey、metaKey四个属性。它们的值是布尔值,如果鼠标与这几个键的其中之一被一同按下,那么这些属性返回true值。
5.相关元素
mouseover事件发生时,事件的目标元素是获得光标的元素,但是有获得就有失去,此时的相关元素就是失去光标的元素。
mouseout事件发生时,事件的目标元素时失去光标的元素,此时的相关元素是获得光标的元素。
event.relatedTarget提供相关元素的信息。(有兼容性的问题,IE8及之前的版本不支持relatedTarget属性)
6.鼠标按钮
mousedown与mouseup事件中,其event事件存在一个button属性,其值有:“0”,“1”,“2”。0代表按下了主鼠标,1代表按下了中间鼠标,2代表按下了次级鼠标。默认情况下主鼠标是左鼠标,次级鼠标是右鼠标。
(IE8及其之前的版本也提供了button属性,但区别很大,使用时要特别注意兼容性)。
7.更多的事件信息
event.detail
其中包含有一个数值,表示在给定位置上发生了多少次单击。从1开始计数。在此期间每触发一对mousedown与mouseup事件就加一,但是在mousedown与mouseup事件之间移动了鼠标位置的话,detail属性会被重置为0.
8.滚轮事件
mousewheel事件:event.wheelDelta
DOMMouseScroll事件:event.detail
见事件——鼠标滚轮事件。
9.触摸设备
ios与Android设备不支持鼠标。
不支持dblclick事件。双击浏览器会放大。
轻击可单击元素会触发mouseover事件。如果导致页面变化就不会有其他事件发生,但是如果没有导致页面变化,依次触发mousedown、mouseup、click事件。
轻击不可单击元素不会触发任何事件。可单击元素指的是可产生默认操作的元素,例如链接,或者那些已经被指定了onclick事件处理程序的元素。