浅谈Javascript鼠标和滚轮事件
更新时间：2012年06月27日 10:29:02 作者：
浅谈Javascript鼠标和滚轮事件,鼠标事件也许是web页面当中最常用到的事件，因为鼠标是最常用的导航设备
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的交互情况。
b）关联元素
对于mouseover和mouseout事件来说，还存在着与事件相关的元素，这连个事件所执行的动作包括，移动鼠标从一个元素边界内部到另一个元素边界内部。以mouseover事件为例，他的主要目标元素是鼠标将要移至的元素，而那个关联元素就是失去鼠标的那个元素。同样对于mouseout事件，主要目标是那个鼠标移出的元素,而关联元素则是获得鼠标的元素，DOM通过event对象上的relatedTarget属性来提供关联元素的信息，IE8或更早版本的IE不支持relatedTarge属性，但却提供了与其功能相类似的fromElement属性和toElement属性。在IE下，当mousemove事件触发时，event对象的fromElement包含着关联元素，当mouseout事件触发时，event的toElement属性包含着关联元素。在IE9中支持所有的属性，一个跨浏览器的getRelatedTarget方法可以这样写：
var eventUtil = {
getRelateTarget:function(event){
if (event.relatedTarget) {
return event.relatedTarget;
}else if(event.fromElement){
return event.fromElement;
}else if(event.toElement){
return event.toElement;
}else {
return null;
}
}
};
c)buttons
click事件只有当鼠标主键点击了某一元素的时候才会触发（或者当某一元素获得焦点时按下回车键），对于mousedown和mouseup来说，在事件对象event上存在一个属性button，他可以确定是哪个键按下或者释放。在DOM实现的button属性值通常有三种可能：
0：代表主键，
1：代表滚轮，
2：代表副键。
在一般情况下主键指的是鼠标的左键，副键代表鼠标右键。
从IE8开始也提供了button属性，但却有着完全不同的取值范围：
0 ：没有按键按下，
1 ：主键已经被按下，
2 ：代表副键已经被按下，
3 ：主键副键都被按下，
4 ：代表中间键被按下，
5 ：代表主键和中间件被按下，
6 ：代表副键和中间键被按下，
7 ：代表三个键都被按下。
可见DOM 模型下的button属性的取值范围比IE模型下的取值范围要简单的多，而且个人觉得ie下的操作情况略显变态。
d)其他事件信息
在DOM2级事件上，为事件对象event还提供了detail属性来提供更多的事件信息，例如对于点击事件来说，detail可以记录同一像素位置的点击次数，detail的值是从1开始计数的，每次点击后加一，如果在mousedown和mouseup之间，鼠标发生移动，这个值将会被清零。
关于鼠标事件就先写这些，日后在慢慢补全。
鼠标事件也许是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的交互情况。
b）关联元素
对于mouseover和mouseout事件来说，还存在着与事件相关的元素，这连个事件所执行的动作包括，移动鼠标从一个元素边界内部到另一个元素边界内部。以mouseover事件为例，他的主要目标元素是鼠标将要移至的元素，而那个关联元素就是失去鼠标的那个元素。同样对于mouseout事件，主要目标是那个鼠标移出的元素,而关联元素则是获得鼠标的元素，DOM通过event对象上的relatedTarget属性来提供关联元素的信息，IE8或更早版本的IE不支持relatedTarge属性，但却提供了与其功能相类似的fromElement属性和toElement属性。在IE下，当mousemove事件触发时，event对象的fromElement包含着关联元素，当mouseout事件触发时，event的toElement属性包含着关联元素。在IE9中支持所有的属性，一个跨浏览器的getRelatedTarget方法可以这样写：
复制代码 代码如下:
var eventUtil = {
getRelateTarget:function(event){
if (event.relatedTarget) {
return event.relatedTarget;
}else if(event.fromElement){
return event.fromElement;
}else if(event.toElement){
return event.toElement;
}else {
return null;
}
}
};
c)buttons
click事件只有当鼠标主键点击了某一元素的时候才会触发（或者当某一元素获得焦点时按下回车键），对于mousedown和mouseup来说，在事件对象event上存在一个属性button，他可以确定是哪个键按下或者释放。在DOM实现的button属性值通常有三种可能：
0：代表主键，
1：代表滚轮，
2：代表副键。
在一般情况下主键指的是鼠标的左键，副键代表鼠标右键。
从IE8开始也提供了button属性，但却有着完全不同的取值范围：
0 ：没有按键按下，
1 ：主键已经被按下，
2 ：代表副键已经被按下，
3 ：主键副键都被按下，
4 ：代表中间键被按下，
5 ：代表主键和中间件被按下，
6 ：代表副键和中间键被按下，
7 ：代表三个键都被按下。
可见DOM 模型下的button属性的取值范围比IE模型下的取值范围要简单的多，而且个人觉得ie下的操作情况略显变态。
d)其他事件信息
在DOM2级事件上，为事件对象event还提供了detail属性来提供更多的事件信息，例如对于点击事件来说，detail可以记录同一像素位置的点击次数，detail的值是从1开始计数的，每次点击后加一，如果在mousedown和mouseup之间，鼠标发生移动，这个值将会被清零。
关于鼠标事件就先写这些，日后在慢慢补全。
您可能感兴趣的文章:
- js实现的鼠标滚轮滚动切换页面效果(类似360默认页面滚动切换效果)
- JavaScript事件类型中焦点、鼠标和滚轮事件详解
- JavaScript焦点事件、鼠标事件和滚轮事件使用详解
- javascript实现禁止鼠标滚轮事件
- 解析javascript中鼠标滚轮事件
- js实现鼠标滚轮控制图片缩放效果的方法
- javascript监听鼠标滚轮事件浅析
- js捕获鼠标滚轮事件代码
- JS滚轮事件onmousewheel使用介绍
- js 事件对象 鼠标滚轮效果演示说明
- JavaScript 滚轮事件使用说明
- js中鼠标滚轮事件详解(firefox多浏览器)
- javascript 鼠标滚轮事件
- javascript 兼容鼠标滚轮事件
- 两种js监听滚轮事件的实现方法
相关文章
Android 自定义view仿微信相机单击拍照长按录视频按钮
这篇文章主要介绍了Android 自定义view仿微信相机单击拍照长按录视频按钮，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-07-07
老生常谈document.ready和window.onload
这篇文章主要介绍了document.ready和window.onload的相关知识,包括document.ready和window.onload的区别,要使用document.ready()或者document.onload()的原因分析,本文结合实例代码给大家介绍的非常详细,需要的朋友参考下吧2024-01-01
JavaScript是一种面向对象的语言,而继承是面向对象编程的一个重要特性,在JavaScript中,继承的实现方式有多种,本文将介绍javascript类的继承的实现,感兴趣的朋友一起看看吧2023-10-10
这篇文章主要为大家介绍了通过JavaScript实现的一个超级好看的鼠标拖尾特效，文中的示例代码讲解详细，对我们学习JavaScript有一定的帮助，感兴趣的可以学习一下2021-12-12
理解JavaScript的caller,callee,call,apply
文章挺好的，虽然我用的是jQuery，但感觉还是有些用的～～～2009-04-04
这篇文章主要介绍了怎样在删除前添加确认弹出框?下面小编带大家来学习一下2019-05-05
javascript每日必学之条件分支，本文的主要内容就是介绍的逻辑条件分支，循环，感兴趣的小伙伴们可以参考一下2016-02-02
这篇文章介绍了Webpack4.x的四个核心概念介绍，文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-06-06
这篇文章主要介绍了浅谈webpack性能榨汁机(打包速度优化)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-01-01
这篇文章主要介绍了基于JavaScript实现回到页面顶部动画代码的相关资料,代码简单易用，非常实用，需要的朋友可以参考下2016-05-05
最新评论