JS事件之事件类型[鼠标和滚轮事件]

鼠标和滚轮事件

鼠标事件是Web开发中最常用 的一类事件，毕竟鼠标还是最主要的定位设备。 DOM3级事件中定义了9个鼠标事件。 简介 如下：

click：在用户单击主鼠标按钮（一般是左边的按钮）或着按下回车键时触发。 这一点对确保易访问性很生要， 意味着onclick事件处理程序即可以通过键盘也可以通过鼠标执行。

dblclick：在用户双击主鼠标按钮时触发。从技术 上来，这个事件并不是DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以DOM3级事件将其纳入了标准；

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

mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有 定义这个事件，但DOM3级事件将它纳入了规范。IE Firefox9+和Opera支持这个事件。

mouseleave：在们于元素上方鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动后代元素上不会触发。DOM2级事件并没有 定义这个事件，但DOM3级事件将它纳入了规范。IE Firefox9+ 和 Opera支持这个事件。

mousemove:当鼠标指针在元素内部移动时重复地触发，不能通过键盘触发这个事件。

mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。

mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发 这个事件。

mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

页面上的所有元素都支持鼠标事件。除了mouseenter和mouseleave，所有根植事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响 其他事件，转为鼠标事件与其他事件是密不可分的关系。

只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件；如果mousedown或mouseup中的一个被取消，就不会触发click事件。类似地，只有触发再次click事件，才会触发一次dblclick事件。如果有代码阻止了连续两次触发click事件（可能是直接取消click事件，也可能通过取消mousedown或mouseup间接实现），那么就不会触发dblclick事件了。这4个事件触发 的顺序始终如下：

* mousedown

* mouseup

* click

* mousedown

* mouseup

* click

* dblclick

显然，click和dblclick事件都会依赖于其他先行事件的触发；而mousedown和mouseup则不爱其他事件影响；

IE8及之前版本中的实现有一个小Bug,因此在双击事件中，会跳过第二个mousedown和click事件，基顺序如下：

* mousedown

* mouseup

* click

* mouseup

* dblclick

IE9修复了这个Bug，之后就正确了

使用以下代码可以检测浏览器是否支持以上DOM2级事件（除dblclick mouseneter和mouseleave之外）；

var isSupported = document.implementation.hasFeature('MouseEvents', '2.0');

要检测浏览器是否支持上面的所有事件，可以使用以下代码：

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

注意，DOM3级事件的feature名是“MouseEvent”，而非“MouseEvents”；

鼠标事件中还有一类滚轮事件。而说的是一类事件，其实就是一个mousewhee事件。这个事件跟踪鼠标滚轮，类似 于 mac的触控板。

1、客户区坐标位置

鼠标事件都是在浏览器视口的特定位置上发生的。这个位置信息保存在事件对象的clientX和clientY属性中。所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口的水平和垂直坐标；

可以使用类似下列代码取得鼠标事件的客户端坐标信息：

var div = document.getElementById('myDiv');
EventUtil.addhandler(div,'click', function(event){
event = EventUtil.getEvent(event);
alert("Client coordinates: " + event.clientX + ","+event.clientY);
})

这里为一个

<div>

元素指定了 onclick事件处理程序。当用户单击这个元素时，就会看到事件的客户端坐标信息。注意这些值中不包括页面流动的距离。这个位置并不表示 鼠标在页面上的位置；

2、页面坐标位置

通过客户区坐标能够知道鼠标是在视口中发什么位置发生的，而页面坐标通过事件对象的pageX和pageY属性，能告诉你事件是在页面中的什么位置发生的。换句话说，这两个属性表示鼠标光标在页面中的位置，坐标是从页面本身而非视口中的左边和顶边计算的。

var div = document.getElementById('myDiv');
EventUtil.addhandler(div,'click', function(event){
event = EventUtil.getEvent(event);
alert("Client coordinates: " + event.pageX + ","+event.pageY);
})

在页面没有滚动条的情况下，pageX和pageY的值与clientX和clientY的值相等。

IE8及更早版本不支持事件对象上的页面坐标，不过使用客户区坐标和滚动信息可以计算出来。这时候需要用到document.body或document.documentElement中的scrollLeft和scrollTop属性。计算 过程如下 所示 ：

var div = document.getElementById('myDiv');
EventUtil.addhandler(div,'click', function(event){
event = EventUtil.getEvent(event);
var pageX = event.pageX,
pageY = event.pageY;

if( pageX == undefined)  {
pageX = event.clientX + (document.body.scrollLeft  || document.docuemntElement.scrollLeft);
}
if( pageY == undefined)  {
pageY = event.clientY + (document.body.scrollTop || document.docuemntElement.scrollTop);
}

alert("page coordinates: " + pageX + ","+pageY);
})

3、屏幕坐标位置

鼠标事件发生时，不仅会有相对于浏览器窗口位置，还会有一个相对于整个电脑屏幕的位置。而通过screenX和screenY属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。

可以使用类似下列代码取得鼠标事件的屏幕坐标信息：

var div = document.getElementById('myDiv');
EventUtil.addhandler(div,'click', function(event){
event = EventUtil.getEvent(event);
alert("screen coordinates: " + event.screenX + ","+event.screenY);
})

与胶一个例子类似，这里也是为

<div>

元素指定了一个onclick事件处理程序。当这个元素被单击时，就会显示出事件屏幕坐标信息了。

4、修改键

虽然鼠标事件主要是使用鼠标来触发的，便在按下鼠标时键盘上的某些键的状态也可以影响到所要采取的操作。这些修改键主是Shift\Ctrl\Alt和Meta(在window键盘中是Windows键，在苹果机中是Cmd键)，它们经常被用来修改鼠标事件 的行为 。DOM为此规定4个属性，表示这些修改键的状态，shiftKey,ctrlKey,altKey和metaKey。这些属性中包含的都是布尔值，如果相应的键被按下了，则值为true，否则值为false。当某个鼠标事件发生时，通过检测这几个属性就可以确定用户是否同时按下其中的键。来看下面例子：

var div = document.getElementById('myDiv');
EventUtil.addhandler(div,'click', function(event){
event = EventUtil.getEvent(event);
var keys = new Array();

if( event.shiftKey) {
keys.push('shift');
}

if( event.ctrlKey) {
keys.push('ctrl');
}

if( event.altKey) {
keys.push('alt');
}

if( event.metaKey) {
keys.push('meta');
}

alert("Keys"+ keys.join(','));
})

在这个例子中，我们通过一个onclick事件处理程序检测了不同修改键的状态。数组keys中包含着被按下修改键的名字。换句话说，如果有属性值为true，就会将对应修改键的名称添加到keys数组中。在事件处理程序的最后，有一个警告框检测到的键的信息显示给用户。

IE9 Firefox  Safari Chrome Opera都支持这4个键，IE8及之前版本不支持metaKey属性

5、相关元素

在发生mouseover和mouseout事件时，还会涉及更多的元素。这两个事件都会涉及把鼠标指针从一个元素的边界之内 移动 到另一个元素的边界之内。对mouseover事件而言，事件 的主要目标是获得光标的元素，而相关元素就是那个失去坐标的元素。类似地，对 mouseout事件而言，事件的主要目标是失去光标的元素，而相关元素则光标的元素。

DOM通过evnet对象的relatedTarget属性提供的相关元素信息。这个属性只对于mouseover和mouseout事件才包含值 ，对于 其它事件 ，这个属性的值 是null，IE8及之前版本不支持relatedTarget属性，但提供了保存着同样信息的不同属性。 在mouseover事件触发时，IE的fromeElement属性中保存了相关元素；在mouseout触发时，IE的toElement属性中保存着相关元素。（IE9支持所有 这些属性）可以把下面这个跨 浏览器取得相关绵方法 添加到EventUti对象中。

var  EventUtil = {

//省略了其他代码

getRelatedTarget: function(event) {
if(event.relatedTarget) {
return event.relatedTarget;
} else  if( event.toElement) {
return event.toElement;
} else if (event.fromElement ) {
return event.fromElement;
} else {
return null;
}
}
}

6、鼠标按钮

只有在主鼠标按钮被单击（或键盘回车键被按下）时才会触发click事件，因此检测按钮的信息并不是必要的。但对于mousedown和mouseup事件来说，则在其event对象存在 一个button属性，表示 按下或释放的按钮。DOM的button属性可能有如下3个值：0表示主鼠标按钮，1表示中间的鼠标按钮（鼠标滚轮按钮），2：表示次鼠标按钮。在常规的设置中，主鼠标按钮就是鼠标左键，而次鼠标按钮就是鼠标右键；

IE8及之前版本也提供了button属性，但这个属性的值和DOM的button属性有很大差异。

* 0：表示没有按下按钮

* 1：表示按下了主鼠标按钮

* 2：表示按下了次鼠标按钮

* 3：表示同时按下了主、次鼠标按钮

* 4：表示按下了中间的鼠标按钮

* 5：表示同时按下了主鼠标按钮和中间的鼠标按钮

* 6：表示同时按下了次鼠标按钮和中间的鼠标按钮

* 7：表示同时按下了三个鼠标按钮

不难想见，DOM模型下的button属性比IE模型 下的button属性更简单也更为实用，同时按下多个鼠标按钮的情况十分罕见。最常见的做法就是将IE模型 规范化为DOM方式，毕竟除了IE8及更早版本之外的其他浏览器都原生 支持DOM模式。而对主、中、次按钮的映射并不困难，只要IE的其他选项分别转换成如同按下 这三个按钮的一个即可（同时将主按钮作为优先选取的对象）。换句话说，IEk返回的５和７会被转换成DOM模型中的０；

由于单独使用能力检测无法确定差异(两种模型有同名的button属性)，因此必须另辟路径。我们知道，支持DOM版本鼠标事件的浏览器可以通过hasFeature()方法来检测，所以可以再为EventUtil对象添加如下getButton()方法。

var  EventUtil = {

//省略了其他代码

getButton: function(event) {
if(document.implementation.hasFeature('MouseEvents',"2.0")) {
return event.button;
} else {
switch(event.button) {
case 0：
case 1:
case 3:
case 5:
case 7：
return 0;
case 2:
case 6:
return 2;
case 4:
return 1;
}
}
}

//省略了其他代码
}

在使用onmouseup事件处理程序时，button的值表示释放的是哪个按钮。此外，如果不是按下或释放了主鼠标按钮，Opera不会触发mouseup或mousedown事件

还在更新中。。。。。