浅谈Javascript鼠标和滚轮事件

2024-05-06 14:21:43

字体：大中小

来源：转载

供稿：网友

a）鼠标事件　　

　　鼠标事件也许是web页面当中最常用到的事件，因为鼠标是最常用的导航设备，在DOM3级事件上定义了9个鼠标事件，分别为：

　　click：当用户点击鼠标主键通常是指鼠标左键或按回车键时触发。

　　dbclick：当用户双击鼠标主键时发生触发，这个事件并没有在DOM2级事件中定义但是却被普遍支持了，后来在DOM3级中得到了标准化。

　　mousedown：当用户按下鼠标任意一个键都会触发，这个事件是不能够通过键盘触发的。

　　mouseenter：当鼠标图标从元素外移动至元素边界内时触发。该事件不支持冒泡，而且当鼠标在元素的上表面移动时负触发此事件。该事件不属于DOM2级事件，属于DOM3级后添加的事件，IE 、FF9+、以及opera支持此事件。

　　mouseleave：当鼠标处于元素上方，之后移出元素边界是触发该事件，与mouseenter事件相同，不支持冒泡，在元素上方是不触发，该事件不属于DOM2级事件，属于DOM3级后添加的事件，IE 、FF9+、以及opera支持此事件。

　　mousemove：当鼠标在某元素周围移动时重复触发，该事件不能通过键盘事件触发。

　　mouseout：当鼠标处于某一元素上方，之后移动到其他元素上方时触发。元素移动到原始元素的边界外，或者原始元素的子元素上，这个事件不能通过键盘触发。

　　mouseover：当用户将鼠标第一次从某元素边界外移动到该元素边界内时触发，这个事件不能够通过键盘触发。

　　mouseup：当用户释放鼠标按键是触发，这个事件不能够通过键盘触发。

　　页面上的所有元素都支持鼠标事件，除了mouseenter和mouseleave外，所有的事件都冒泡，并且他们的默认行为是可以被取消掉的。但取消鼠标事件的默认行为可能会影响到其他事件，因为有些鼠标事件是相互依赖的。

　　只有当一个mousedown事件和一个mouseup事件在同一个元素上触发，才能触发鼠标的click事件；假设任何一个事件被取消，click事件将永远不会被触发。相似的原理dbclick事件依赖于click事件，如果连续两次click事件中任意一次被取消，dbclick都不会被触发。常用的鼠标事件如下:

　　1.mousedown、2.mouseup、3.click、4.mousedown、5.mouseup、6.click、7.dbclick。

　　无论是click 还是 dbclick事件，都依赖于其他事件的触发。

　　你可以通过下面的代码来确定浏览器是否在dom2事件上支持鼠标事件，

　　var isSupport = document.implementation.hasFeature('MouseEvents'，'2.0')；

　　然而值得注意的是在dom3级事件上检测则有些不同：

　　var isSupport = document.implementation.hasFeature('MouseEvent','3.0');

　　在鼠标事件上还包含一个子类事件，即wheel事件（滚轮事件）。在wheel事件中只包含一个事件，mousewheel事件，他反应鼠标滚轮或其他装置，如mac的touchpad的交互情况。

上一篇：javascript学习笔记(六) Date 日期类型

下一篇：基于jQuery的遍历同id元素并响应事件的代码