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

• click：在用户单击主鼠标按钮(一般是左边的按钮)或者按下回车键时触发。这一点对确保易访问性很重要，意味着onclick事件处理程序既可以通过键盘也可以通过鼠标执行。
• dblclick：在用户双击主鼠标按钮(一般是左边的按钮)时触发。从技术上说，这个事件并不是DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以DOM3级事件将其纳入了标准。
• mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。
• mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但DOM3级事件将它纳入了规范。IE、Firefox 9+和Opera支持这个事件。
• mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但DOM3级事件将它纳入了规范。IE、Firefox 9+和Opera支持这个事件。
• mousemove：当鼠标指针在元素内部移动时重复地触发。不能通过键盘触发这个事件。
• mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件。
• mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触发。不能通过键盘触发这个事件。
• mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。

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

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

(1) mousedown
(2) mouseup
(3) click
(4) mousedown
(5) mouseup
(6) click
(7) dblclick

显然，click和dblclick事件都会依赖于其他先行事件的触发，而mousedown和mouseup则不受其他事件的影响。IE8及之前版本中的实现有一个小bug，因此在双击事件中，会跳过第二个mousedown和click事件，其顺序如下：

(1) mousedown
(2) mouseup
(3) click
(4) mouseup
(5) dblclick

IE9修复了这个bug，之后顺序就正确了。使用以下代码可以检测浏览器是否支持以上DOM2级事件(除dblclick、mouseenter和mouseleave之外)：

var isSupported = document.implementation.hasFeature("MouseEvents","2.0");
要检测浏览器是否支持上面的所有事件，可以使用以下代码：
var isSupported = document.implementation.hasFeature("MouseEvent","3.0");

<script type="text/javascript">
var tips=null;
function createTips(event){
  if(tips===null){
    tips=document.createElement("div");
    tips.style.cssText="position:absolute;z-index:99999;padding:3px 6px;background-color:#333;color:#fff;border-radius:3px;box-shadow:0 0 5px #333;font-family:Arial;font-size:12px;";
    document.body.appendChild(tips);
  }
  event=event||window.event;
  var target=event.target||event.srcElement;
  tips.innerHTML+=event.type+"<br>";
  if(event.type=="dblclick"){
    var pageX=event.pageX,pageY=event.pageY;
    if(pageX===undefined){pageX=event.clientX+(document.body.scrollLeft || document.documentElement.scrollLeft);}
    if(pageY===undefined){pageY=event.clientY+(document.body.scrollTop || document.documentElement.scrollTop);}
    tips.style.left=(tips.offsetWidth>pageX?pageX:pageX-tips.offsetWidth)+"px";
    tips.style.top=(tips.offsetHeight>pageY?pageY:pageY-tips.offsetHeight)+"px";
  }
}
if(document.addEventListener){
  document.addEventListener("mousedown",function(event){createTips(event);},false);
  document.addEventListener("mouseup",function(event){createTips(event);},false);
  document.addEventListener("click",function(event){createTips(event);},false);
  document.addEventListener("dblclick",function(event){createTips(event);},false);
}else{
  document.attachEvent("onmousedown",function(event){createTips(event);});
  document.attachEvent("onmouseup",function(event){createTips(event);});
  document.attachEvent("onclick",function(event){createTips(event);});
  document.attachEvent("ondblclick",function(event){createTips(event);});
}
</script>