本来想和上一篇一起写，又担心太长，导致自己复习时，看不下去，于是就另写一篇笔记。
-
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页面坐标位置
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、metaIE9、及现代浏览器都是支持这四个键的，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值清零。
深夜发……
