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.onmouseover=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