java 鼠标滚轮监听事件_js事件详解二：鼠标和滚轮事件

概述

鼠标事件是web开发中最常用的一类事件，毕竟鼠标还是最主要的定位设备。在DOM3级事件中定义了9个鼠标事件，分别是：click,dbclick,mousedown,mouseenter,mouseleave,mousemove,mouseout,mouseover。这九个鼠标事件的具体含义相信大家从字面上看就能大概的了解了。页面上所有的元素都支持鼠标事件，除了mouseenter和mouseleave，所有的鼠标事件都会冒泡，也可以被取消，而取消鼠标事件将会影响浏览器的默认行为。取消鼠标事件的默认行为还会影响其他事件，因为鼠标事件与其他事件是密不可分的关系。

下面简单介绍下各个事件的含义：

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

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

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

mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。IE,Firefox9+和opera支持这个事件。

mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件也不冒泡，而且在光标移动到后代元素上不会触发。同样的，IE,Firefox9+和opera支持这个事件。

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

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

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

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

兼容各个浏览器的事件监听对象：

var EventUntil={

addHandler:function(element,type,handler){

if(element.addEventListener){

element.addEventListener(type,handler,false);

}else if(element.attachEvent){

element.attachEvent('on'+type,handler);

}else{

element['on'+type]=handler;

}

},

removeHandler:function(element,type,handler){

if(element.removeEventListener){

element.removeEventListener(type,handler,false);

}else if(element.detachEvent){

element.detachEvent("on"+type,handler);

}else{

element["on"+type]=null;

}

},

getEvent:function(event){

return event?event:window.event;

},

getTarget:function(event){

return event.target||event.srcElement;

},

preventDefault:function(event){

if (event.preventDefault) {

event.preventDefault();

}else{

event.returnValue=false;

}

},

stopPropagation:function(event){

if(event.stopPropagation){

event.stopPropagation();

}else{

event.cancelBubble=true;

}

}

}

该对象封装了ie和dom级事件的常用事件函数。大家可以参考着使用。