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

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

什么叫客户区？

懂了吧,是不包括菜单栏的

• pageX与pageY页面坐标位置
  var bd=document.getElementById("bd");
  EventUtil.addHandler(bd,'click',function(evet){
  event=EventUtil.getEnent(event);
  alert('Client coordinates:'+event.pageX+','+event.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值清零。

---

深夜发……