本來想和上一篇一起寫，又擔心太長转培，導(dǎo)致自己復(fù)習時唾糯，看不下去，于是就另寫一篇筆記淮摔。
-
ClientX與ClientY返回客戶區(qū)坐標位置
var bd=document.getElementById("bd");//body
EventUtil.addHandler(bd,'click',function(evet){
event=EventUtil.getEnent(event);
alert('Client coordinates:'+event.clientX+','+event.clientY);
})
當在body區(qū)域點擊時私沮，會彈出鼠標點擊位置在整個客戶區(qū)的坐標。
還有一點需要注意,該坐標值是針對客戶區(qū),而不是頁面,當頁面向上或向下滾動時,并不會影響該位置的坐標值.
什么叫客戶區(qū)和橙？
懂了吧,是不包括菜單欄的
-
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前篇筆記關(guān)于UI事件時晰搀，有提到scroll事件，但是沒有仔細說办斑，因為它真的很奇怪
js高級程序設(shè)計這本書里外恕，提到如何兼容使用scroll值，但是實際操作中，我發(fā)現(xiàn)在火狐與谷歌的瀏覽器中即使CSS1Compat的渲染方式鳞疲，但是執(zhí)行時卻按照document.body.scrollTop的方式罪郊，所以這并沒有效果。
EventUtil.addHandler(window,'scroll',function(){
if(document.compatMode=='CSS1Compat'){
alert(document.documentElement.scrollTop);
}else{
alert(document.body.scrollTop);
}
})
但是有以中方簡單的方法卻可以實現(xiàn)
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鍵可以實現(xiàn)連選。
這些修改鍵為shift拴曲、ctrl争舞、alt、metaIE9澈灼、及現(xiàn)代瀏覽器都是支持這四個鍵的竞川，IE8不支持meta鍵。
DOM中為相應(yīng)的鍵分別設(shè)置了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系統(tǒng)中的windows鍵壕吹，蘋果中的cmd鍵。 - 相關(guān)元素
- 這個屬性很有用删铃，可以幫助解決這里最后的那個無法停止冒泡的問題耳贬。
DOM為這兩個mouseover``與mouseout事件提供了更方便理解他們的屬性event.relatedTarget屬性。
mouseover事件猎唁，事件的主目標（this）是獲得光標的元素咒劲。而相關(guān)元素（.relatedTarget）是那個失去光標的元素。
mouseout事件诫隅，事件的主目標（this）是剛失去光標的元素缎患。而相關(guān)元素（.relatedTarget）是那個剛獲得光標的元素。
動筆劃一劃阎肝，我們會發(fā)現(xiàn)正常情況（非冒泡）情況下，相關(guān)屬性指向的元素永遠在主目標元素的外層肮街。
理解這一點风题，可以很好的理解如何避免冒泡。
IE8及之前版本并不支持relatedTarget屬性，但提供著保存了同樣信息的不同屬性沛硅。在mouseover事件觸發(fā)時眼刃，IE的fromElement屬性中保存著相關(guān)元素，在mouseout事件觸發(fā)時摇肌，IE的toElement屬性中保存著相關(guān)元素擂红。
但是，我在ietest中測試時围小，卻發(fā)現(xiàn)事件對象在發(fā)生一個事件時不僅有from還有to且還都不為空昵骤。
IE9支持所有這些屬性。
這又是一個跨瀏覽器的屬性肯适，需要為之前的EventUtil添加獲得相關(guān)元素的方法变秦。
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為相關(guān)元素
//獲得相關(guān)元素
var reltg = e.relatedTarget ? e.relatedTarget : e.type == 'mouseout' ? e.toElement : e.fromElement;
//這個循環(huán)是很巧秒的地方蹦玫，利用了之前總結(jié)的相關(guān)元素總在目標元素外層。
//建議自己測試一下刘绣，冒泡過程中樱溉，this值變化為當前事件處理對象，
//相關(guān)元素值保持該事件開始冒泡前的相關(guān)元素值纬凤，
//所以一旦冒泡福贞，this值便會等于然后大于相關(guān)元素值。
while (reltg && reltg != handler)
reltg = reltg.parentNode;
//相關(guān)元素等于當前事件處理元素移斩，說明存在第一層冒泡肚医，不進行循環(huán)，返回false
//相關(guān)元素在事件處理元素外層向瓷，說明不是冒泡肠套，
//進入循環(huán)后，逐漸將相關(guān)元素移至外層猖任，為null你稚，不符和相關(guān)元素reltg為true，退出循環(huán)朱躺，返回true刁赖。
//相關(guān)元素在事件處理程序內(nèi)層，說明已經(jīng)冒泡兩層以上长搀。
//進入循環(huán)后宇弛，隨著相關(guān)元素逐漸移至外層至與this相等。退出循環(huán)后源请，返回false
return (reltg != handler);
}
div.onmouseover=function(){
if(isMouseLeaveOrEnter(event,this)){
//對應(yīng)事件內(nèi)容
}
}
【建議看我筆記的小伙伴進行操作測試枪芒，這樣更容易理解彻况，否則太虛】-
鼠標按鈕
鼠標上一共有三個按鈕，左鍵舅踪、中鍵纽甘、右鍵。
dom為事件對象提供了button屬性抽碌，來區(qū)分這三個按鈕悍赢。
屬性值為0：左鍵；
屬性值為1：中間鼠標按鈕货徙；
屬性值為2：次鼠標按鈕左权；
但是IE8及之前版本也提供了button屬性，但是卻更加細致化啦按鈕情況破婆。
0：沒有按下涮总；
1：表示按下了主鍵；
2：按下了次鍵祷舀；
3：同時主次瀑梗；
4：按下中間；
5：同時主中裳扯；
6：按下了次中抛丽；
7：按下了三個。
但是饰豺，人類的手指不想那么辛苦亿鲜。所以最常見的做法就是將IE模型規(guī)范化為dom規(guī)范。
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屬性
包含一個數(shù)值冤吨，表示在給定位置上發(fā)生了幾次單擊蒿柳。
在同一個元素上，相繼的發(fā)生一次mousedown與一次mouseup算作一次單擊漩蟆。如果之間變換位置垒探，則detail值清零。
深夜發(fā)……
