JS-事件类型（鼠标事件中event对象的独有属性）

ClientX与ClientY返回客户区坐标位置

 var bd=document.getElementById("bd");//body
          EventUtil.addHandler(bd,'click',function(evet){
              event=EventUtil.getEnent(event);
              alert('Client coordinates:'+event.clientX+','+event.clientY);
})

当在body区域点击时，会弹出鼠标点击位置在整个客户区的坐标。
还有一点需要注意,该坐标值是针对客户区,而不是页面,当页面向上或向下滚动时,并不会影响该位置的坐标值.

pageX与pageY页面坐标位置

这个属性值,是从页面本省而非视口的左边和顶边计算的.
【注意】IE8及更早的版本不支持事件对象上的页面坐标。有另个办法可以帮助这些较早的版本获取页面坐标值。

• 利用scrollTop、scrollLeft前篇笔记关于UI事件时，有提到scroll事件，但是没有仔细说，因为它真的很奇怪

js高级程序设计这本书里，提到如何兼容使用scroll值，但是实际操作中，我发现在火狐与谷歌的浏览器中即使CSS1Compat的渲染方式，但是执行时却按照document.body.scrollTop的方式，所以这并没有效果。

 EventUtil.addHandler(window,'scroll',function(){
if(document.compatMode=='CSS1Compat'){
 alert(document.documentElement.scrollTop);
 }else{
 alert(document.body.scrollTop);
}
});

但是有以中方简单的方法却可以实现

var top=document.documentElement.scrollTop||document.body.scrollTop;

• 解决方法

 var bd=document.getElementById("bd");
        EventUtil.addHandler(bd,'click',function(event){
            var top=document.documentElement.scrollTop||document.body.scrollTop;
            var left=document.documentElement.scrollLeft||document.body.scrollLeft;
            event=EventUtil.getEvent(event);
            var pageX=event.pageX,pageY=event.pageY;
            if(!pageX){
                pageX=event.clientX+top;
            }
            if(!pageY){
                pageY=event.clientY+left;
            }
            alert(pageX+','+pageY)
        })

• screenX与screenY屏幕坐标的位置

        这个获得的就是鼠标的位置相对于整个电脑屏幕的位置，这个浏览器兼容性很好，就不举例啦！

• 修改键

键盘上的某些按键也会影响到鼠标的行为，我们知道的就是，按住shift键可以实现连选。
这些修改键为shift、ctrl、alt、meta IE9、及现代浏览器都是支持这四个键的，IE8不支持meta键。
DOM中为相应的键分别设置了event的四个属性：event.shifkey、event.ctrlkey、event.altkey、event.metakey。这些属性都是布尔值，来判断用户是否按下这些键。

          var bd=document.getElementById("bd");
          EventUtil.addHandler(bd,'click',function(event){
              if(event.shiftKey){
                  alert('shift');
              }
              if(event.ctrlKey){
                  alert('ctrl');
              }
              if(event.altKey){
                  alert('alt');
              }
              if(event.metaKey){
                  alert('meta');
              }
          })

很简单的一个例子。meta键指的是win系统中的windows键，苹果中的cmd键。

• 相关元素

这个属性很有用，可以帮助解决这里最后的那个无法停止冒泡的问题。
DOM为这两个mouseover``与mouseout事件提供了更方便理解他们的属性event.relatedTarget属性。

mouseover事件，事件的主目标（this）是获得光标的元素。而相关元素（.relatedTarget）是那个失去光标的元素。
mouseout事件，事件的主目标（this）是刚失去光标的元素。而相关元素（.relatedTarget）是那个刚获得光标的元素。
动笔划一划，我们会发现正常情况（非冒泡）情况下，相关属性指向的元素永远在主目标元素的外层。

理解这一点，可以很好的理解如何避免冒泡。
IE8及之前版本并不支持relatedTarget属性，但提供着保存了同样信息的不同属性。在mouseover事件触发时，IE的fromElement属性中保存着相关元素，在mouseout事件触发时，IE的toElement属性中保存着相关元素。
但是，我在ietest中测试时，却发现事件对象在发生一个事件时不仅有from还有to且还都不为空。
IE9支持所有这些属性。
这又是一个跨浏览器的属性，需要为之前的 EventUtil添加获得相关元素的方法。

        getReleatedTarget:function(event){
            if(event.relatedTarget){
                return event.relatedTarget;
            }else if(event.type=='mouseover'&& event.fromElement ){
                return event.fromElement;
            }else if(event.type=='mouseout'&& event.toElement){
                return event.toElement;
            }else{
                return null;
            }
        }

利用此属性如何避免over与out事件的冒泡。

   function stopPropagationOfOverEnter(e, handler) {  
        //handle为目标元素，reltg为相关元素
        //获得相关元素
    var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;  
    //这个循环是很巧秒的地方，利用了之前总结的相关元素总在目标元素外层。
    //建议自己测试一下，冒泡过程中，this值变化为当前事件处理对象，
    //相关元素值保持该事件开始冒泡前的相关元素值，
    //所以一旦冒泡，this值便会等于然后大于相关元素值。
    while (reltg && reltg != handler)  
        reltg = reltg.parentNode;  
    //相关元素等于当前事件处理元素，说明存在第一层冒泡，不进行循环，返回false
    //相关元素在事件处理元素外层，说明不是冒泡，
    //进入循环后，逐渐将相关元素移至外层，为null，不符和相关元素reltg为true，退出循环，返回true。
    //相关元素在事件处理程序内层，说明已经冒泡两层以上。
    //进入循环后，随着相关元素逐渐移至外层至与this相等。退出循环后，返回false
    return (reltg != handler);  
}
     div.οnmοuseοver=function(){
         if(isMouseLeaveOrEnter(event,this)){
             //对应事件内容
         }
     }

• 鼠标按钮

鼠标上一共有三个按钮，左键、中键、右键。
dom为事件对象提供了button属性，来区分这三个按钮。
属性值为0：左键；
属性值为1：中间鼠标按钮；
属性值为2：次鼠标按钮；
但是IE8及之前版本也提供了button属性，但是却更加细致化啦按钮情况。
0：没有按下；
1：表示按下了主键；
2：按下了次键；
3：同时主次；
4：按下中间；
5：同时主中；
6：按下了次中；
7：按下了三个。
但是，人类的手指不想那么辛苦。所以最常见的做法就是将IE模型规范化为dom规范。

          getbuttom:function(event){
              if(document.implementation.hasFeature("MouseEvent",'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;

                  }
              }
          }

• detail属性

包含一个数值，表示在给定位置上发生了几次单击。
在同一个元素上，相继的发生一次mousedown与一次mouseup算作一次单击。如果之间变换位置，则detail值清零。

原文地址：http://www.jianshu.com/p/3bdcb47d9bd6