概述
鼠标事件是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级事件的常用事件函数。大家可以参考着使用。
扫一扫
1618
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
