在很多語言的學(xué)習(xí)中，“事件”都是一個(gè)比較難理解，但是又是一個(gè)很重要的概念。JavaScript中的事件處理也是一樣，正因?yàn)橛辛耸录幚恚艜?huì)出現(xiàn)Ajax拖動(dòng)的效果。本文就討論一下JavaScript中的事件處理，讀過之后，您就會(huì)知道，很多Ajax框架實(shí)現(xiàn)拖動(dòng)效果的原理了。
一、 IE Event對(duì)象
（一）IE Event對(duì)象的主要屬性和方法
在IE中有一個(gè)專門負(fù)責(zé)事件處理的對(duì)象Event，這個(gè)對(duì)象負(fù)責(zé)對(duì)事件的處理，含有很多的屬性和方法，通過這些方法和屬性的調(diào)用，就能完成很多的事件處理。
type：事件的類型，就是HTML標(biāo)簽屬性中，沒有“on”前綴之后的字符串，例如“Click”就代表單擊事件。
srcElement：事件源，就是發(fā)生事件的元素。
button：聲明了被按下的鼠標(biāo)鍵，是一個(gè)整數(shù)。1代表鼠標(biāo)左鍵，2代表鼠標(biāo)右鍵，4代表鼠標(biāo)的中間鍵，如果按下了多個(gè)鼠標(biāo)鍵，就把這些值加在一起，所以3就代表左右鍵同時(shí)按下。
clientX/clientY：是指事件發(fā)生的時(shí)候，鼠標(biāo)的橫、縱坐標(biāo)，返回的是整數(shù)，它們的值是相對(duì)于包容窗口的左上角生成的。
offsetX/offsetY：鼠標(biāo)指針相對(duì)于源元素的位置，可以確定單擊Image對(duì)象的哪個(gè)象素。
altKey，ctrlKey，shiftKey：顧名思義，這些屬性是指鼠標(biāo)事件發(fā)生的時(shí)候，是否同時(shí)按住了Alt、Ctrl或者Shift鍵，返回的是一個(gè)布爾值。
keyCode：返回keydown和keyup事件發(fā)生的時(shí)候，按鍵的代碼以及keypress事件的Unicode字符。
fromElement、toElement前者是指代mouseover事件移動(dòng)過的文檔元素，后者指代mouseout事件中鼠標(biāo)移動(dòng)到的文檔元素。
cancelBubble：一個(gè)布爾屬性，把它設(shè)置為true的時(shí)候，將停止事件進(jìn)一步起泡到包容層次的元素。
returnValue：一個(gè)布爾值屬性，設(shè)置為false的時(shí)候可以組織瀏覽器執(zhí)行默認(rèn)的事件動(dòng)作，相當(dāng)于<a href=”#” onclick=”ProcessMethod();return false;” />。
attachEvent()和detachEvent()方法：為制定DOM對(duì)象事件類型注冊(cè)多個(gè)事件處理函數(shù)的方法，它們有兩個(gè)參數(shù)，第一個(gè)是事件類型，第二個(gè)是事件處理函數(shù)。在attachEvent()事件執(zhí)行的時(shí)候，this關(guān)鍵字指向的是window對(duì)象，而不是發(fā)生事件的那個(gè)元素。
?。ǘ㊣E Event對(duì)象的一些說明
1.IE Event對(duì)象是一個(gè)全局屬性
在IE中，不能把Event對(duì)象作為參數(shù)傳遞給事件處理程序，只能用window.event或者event來引用Event對(duì)象。因?yàn)樵贗E中，Event是window的一個(gè)屬性，也就是說event是一個(gè)全局變量，這個(gè)變量提供了事件的細(xì)節(jié)。
2.IE中事件的起泡：IE中事件可以沿著包容層次一點(diǎn)點(diǎn)起泡到上層，也就是說，下層的DOM節(jié)點(diǎn)定義的事件處理函數(shù)，到了上層的節(jié)點(diǎn)如果還有和下層相同事件類型的事件處理函數(shù)，那么上層的事件處理函數(shù)也會(huì)執(zhí)行。例如，<div>標(biāo)簽包含了<a>，如果這兩個(gè)標(biāo)簽都有onclick事件的處理函數(shù)，那么執(zhí)行的情況就是先執(zhí)行<a>標(biāo)簽的onclick事件處理函數(shù)，再執(zhí)行<div>的事件處理函數(shù)。如果希望<a>的事件處理函數(shù)執(zhí)行完畢之后，不希望執(zhí)行上層的<div>的onclick的事件處理函數(shù)了，那么就把cancelBubble設(shè)置為false即可。
二、 IE中拖動(dòng)DOM元素的例子
/*
該函數(shù)由mousedown事件處理調(diào)用
它為隨后發(fā)生的mousemove和mouseup事件注冊(cè)了臨時(shí)的捕捉事件處理程序
并用這些事件處理程序拖動(dòng)指定的文檔元素
第二個(gè)參數(shù)必須是mousedown事件的事件對(duì)象
*/
function beginDrag(elementToDrag,event)
{
//該元素當(dāng)前位于何處
//該元素的樣式性質(zhì)必須具有l(wèi)eft和top css屬性
//此外，我們假定他們用象素做單位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//計(jì)算一個(gè)點(diǎn)和鼠標(biāo)點(diǎn)擊之間的距離，下面的嵌套的moveHandler函數(shù)需要這些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注冊(cè)mousedown事件后發(fā)生的mousemove和mouseup事件的處理程序
// 注意，它們被注冊(cè)為文檔的捕捉事件處理程序
// 在鼠標(biāo)按鈕保持按下的狀態(tài)的時(shí)候，這些事件處理程序保持活動(dòng)的狀態(tài)
// 在按鈕被釋放的時(shí)候，它們被刪除
document.attachEvent(“onmousemove”,moveHandler);
document.attachEvent(“onmouseup”,upHandler);
//我們已經(jīng)處理了該事件，不要讓別的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
這是在元素被拖動(dòng)時(shí)候捕捉mousemove事件的處理程序，它響應(yīng)移動(dòng)的元素
*/
function moveHandler(e)
{
//把元素移動(dòng)到當(dāng)前的鼠標(biāo)位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+”px”;
elementToDrag.style.top=(event.clientY-deltaY)+”px”;
//不要讓別的元素看到該事件
event.cancelBubble=true;
}
/*
該事件將捕捉拖動(dòng)結(jié)束的時(shí)候發(fā)生的mouseup事件
*/
function upHandler(e)
{
//注銷事件處理程序
document.detachEvent(“onmouseup”,upHandler);
document.detachEvent(“onmousemove”,moveHandler);}
event.cancelBubble=true;
}
調(diào)用它的HTML文件代碼：
<html>
<head>
<title>Untitled Page</title>
<script type=”text/javascript” src=”dragIE.js”></script>
</head>
<body>
<div style=”position:absolute;left:100px;top:100px;background-color:White;border:solid black;”>
<div style=”background-color:Gray;border-bottom:solid black;padding:3px;font-family:Sans-Serif;font-weight:bold;” onmousedown=”beginDrag(this.parentNode,event);”>
拖動(dòng)我
</div>
<div>
<p>This is a test.Testing,testing</p></div>
</div>
</body>
三、 DOM中的高級(jí)事件處理
IE 6中的事件處理，并不是W3C DOM標(biāo)準(zhǔn)的事件處理模型，所以如果上述代碼運(yùn)行在Mozilla Firefox的瀏覽器中，就會(huì)失去作用，同時(shí)即將發(fā)布的IE 7也將支持W3C DOM的二級(jí)標(biāo)準(zhǔn)，所以掌握DOM的高級(jí)事件處理顯得就很重要了，因?yàn)閃3C DOM二級(jí)標(biāo)準(zhǔn)是未來Web的發(fā)展方向，同時(shí)W3C DOM的API非常常用，為未來更加復(fù)雜的Web開發(fā)提供了良好的基礎(chǔ)。
（一）事件處理程序的作用域和事件的傳播
在正式討論DOM高級(jí)事件處理之前，我們有必要了解一下事件處理程序的作用域。事件處理程序的作用域要比普通的函數(shù)作用域復(fù)雜很多。普通的函數(shù)作用域鏈比較容易，例如在一個(gè)普通函數(shù)中查找一個(gè)變量a，那么JavaScript解釋器會(huì)先在該函數(shù)的調(diào)用對(duì)象中查找是否有a這個(gè)變量，如果沒有，將會(huì)在作用域鏈的下一個(gè)對(duì)象，一般是全局對(duì)象中查找。但是事件處理程序沒這么簡(jiǎn)單，特別是用HTML的屬性定義的，它們的作用域鏈的頭部是調(diào)用它們的對(duì)象，而下一個(gè)對(duì)象并不是全局對(duì)象，而是觸發(fā)事件處理程序的對(duì)象。這樣就會(huì)出現(xiàn)一個(gè)問題，window和document都有一個(gè)方法open()，如果open()前面不加修飾，那么在事件處理的函數(shù)中將會(huì)調(diào)用document.open()方法，而不是常用的window.open()方法，所以使用的時(shí)候應(yīng)該明確指明是window.open()。
（二）事件傳播和注冊(cè)事件處理程序
1.事件傳播
在二級(jí)DOM標(biāo)準(zhǔn)中，事件處理程序比較復(fù)雜，當(dāng)事件發(fā)生的時(shí)候，目標(biāo)節(jié)點(diǎn)的事件處理程序就會(huì)被觸發(fā)執(zhí)行，但是目標(biāo)節(jié)點(diǎn)的父節(jié)點(diǎn)也有機(jī)會(huì)來處理這個(gè)事件。事件的傳播分為三個(gè)階段，首先是捕捉階段，事件從Document對(duì)象沿著DOM樹向下傳播到目標(biāo)節(jié)點(diǎn)，如果目標(biāo)的任何一個(gè)父節(jié)點(diǎn)注冊(cè)了捕捉事件的處理程序，那么事件在傳播的過程中就會(huì)首先運(yùn)行這個(gè)程序。下一個(gè)階段就是發(fā)生在目標(biāo)節(jié)點(diǎn)自身了，注冊(cè)在目標(biāo)節(jié)點(diǎn)上的相應(yīng)的事件處理程序就會(huì)執(zhí)行；最后是起泡階段，事件將從目標(biāo)節(jié)點(diǎn)向上傳回給父節(jié)點(diǎn)，同樣，如果父節(jié)點(diǎn)有相應(yīng)的事件處理程序也會(huì)處理。在IE中，沒有捕捉的階段，但是有起泡的階段?？梢杂胹topPropagating()方法來停止事件傳播，也就是讓其他元素對(duì)這個(gè)事件不可見，在IE 6中，就是把cancelBubble設(shè)置為true。
2.注冊(cè)事件處理程序
和IE一樣，DOM標(biāo)準(zhǔn)也有自己的事件處理程序，不過DOM二級(jí)標(biāo)準(zhǔn)的事件處理程序比IE的強(qiáng)大一些，事件處理程序的注冊(cè)用addEventListner方法，該方法有三個(gè)參數(shù)，第一個(gè)是事件類型，第二個(gè)是處理的函數(shù)，第三個(gè)是一個(gè)布爾值，true表示制定的事件處理程序?qū)⒃谑录鞑サ碾A段用于捕捉事件，否則就不捕捉，當(dāng)事件發(fā)生在對(duì)象上才觸發(fā)執(zhí)行這個(gè)事件處理的函數(shù)，或者發(fā)生在該對(duì)象的字節(jié)點(diǎn)上，并且向上起泡到這個(gè)對(duì)象上的時(shí)候，觸發(fā)執(zhí)行這個(gè)事件處理的函數(shù)。例如：document.addEventListener(“mousemove”,moveHandler,true);就是在mousemove事件發(fā)生的時(shí)候，調(diào)用moveHandler函數(shù)，并且可以捕捉事件。
可以用addEventListener為一個(gè)事件注冊(cè)多個(gè)事件處理的程序，但是這些函數(shù)的執(zhí)行順序是不確定，并不像C#那樣按照注冊(cè)的順序執(zhí)行。
在Mozilla Firefox中用addEventListener注冊(cè)一個(gè)事件處理程序的時(shí)候，this關(guān)鍵字就表示調(diào)用事件處理程序的文檔元素，但是其他瀏覽器并不一定是這樣，因?yàn)檫@不是DOM標(biāo)準(zhǔn)，正確的做法是用currentTarget屬性來引用調(diào)用事件處理程序的文檔元素。
3.二級(jí)DOM標(biāo)準(zhǔn)中的Event
和IE不同的是，W3C DOM中的Event對(duì)象并不是window全局對(duì)象下面的屬性，換句話說，event不是全局變量。通常在DOM二級(jí)標(biāo)準(zhǔn)中，event作為發(fā)生事件的文檔對(duì)象的屬性。Event含有兩個(gè)子接口，分別是UIEvent和MutationEvent，這兩個(gè)子接口實(shí)現(xiàn)了Event的所有方法和屬性，而MouseEvent接口又是UIEvent的子接口，所以實(shí)現(xiàn)了UIEvent和Event的所有方法和屬性。下面，我們就看看Event、UIEvent和MouseEvent的主要屬性和方法。
1.Event
type：事件類型，和IE類似，但是沒有“on”前綴，例如單擊事件只是“click”。
target：發(fā)生事件的節(jié)點(diǎn)。
currentTarget：發(fā)生當(dāng)前正在處理的事件的節(jié)點(diǎn)，可能是Target屬性所指向的節(jié)點(diǎn)，也可能由于捕捉或者起泡，指向Target所指節(jié)點(diǎn)的父節(jié)點(diǎn)。
eventPhase：指定了事件傳播的階段。是一個(gè)數(shù)字。
timeStamp：事件發(fā)生的時(shí)間。
bubbles：指明該事件是否起泡。
cancelable：指明該事件是否可以用preventDefault()方法來取消默認(rèn)的動(dòng)作。
preventDefault()方法：取消事件的默認(rèn)動(dòng)作；
stopPropagation()方法：停止事件傳播。
2.UIEvent
view：發(fā)生事件的window對(duì)象。
detail：提供事件的額外信息，對(duì)于單擊事件、mousedown和mouseup事件都代表的是點(diǎn)擊次數(shù)。
3.MouseEvent
button：一個(gè)數(shù)字，指明在mousedown、mouseup和單擊事件中，鼠標(biāo)鍵的狀態(tài)，和IE中的button屬性類似，但是數(shù)字代表的意義不一樣，0代表左鍵，1代表中間鍵，2代表右鍵。
altKey、ctrlKey、shiftKey、metaKey：和IE相同，但是IE沒有最后一個(gè)。
clientX、clientY：和IE的含義相同，但是在DOM標(biāo)準(zhǔn)中，這兩個(gè)屬性值都不考慮文檔的滾動(dòng)情況，也就是說，無論文檔滾動(dòng)到哪里，只要事件發(fā)生在窗口左上角，clientX和clientY都是0，所以在IE中，要想得到事件發(fā)生的坐標(biāo)相對(duì)于文檔開頭的位置，要加上document.body.scrollLeft和document.body.scrollTop。
screenX、screenY：鼠標(biāo)指針相對(duì)于顯示器左上角的位置，如果你想打開新的窗口，這兩個(gè)屬性很重要。
relatedTarget：和IE中的fromElement、toElement類似，除了對(duì)于mouseover和mouseout有意義外，其他的事件沒什么意義。
（三）兼容于兩種主流瀏覽器的拖動(dòng)DOM元素的例子
好了，剛才講了這么多DOM編程和IE中的事件，那么如何編寫兼容IE和Mozilla Firefox兩種主流瀏覽器的拖拽程序呢？代碼如下：
function beginDrag(elementToDrag,event)
{
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
if(document.addEventListener)
{
document.addEventListener(“mousemove”,moveHandler,true);
document.addEventListener(“mouseup”,upHandler,true);
}
else if(document.attachEvent)
{
document.attachEvent(“onmousemove”,moveHandler);
document.attachEvent(“onmouseup”,upHandler);
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
if(event.preventDefault) event.preventDefault();
else event.returnValue=false;
function moveHandler(e)
{
if (!e) e=window.event; //如果是IE的事件對(duì)象，那么就用window.event
//全局屬性，否則就用DOM二級(jí)標(biāo)準(zhǔn)的Event對(duì)象。
elementToDrag.style.left=(event.clientX-deltaX)+”px”;
elementToDrag.style.top=(event.clientY-deltaY)+”px”;
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
function upHandler(e)
{
if(document.removeEventListener)
{
document.removeEventListener(“mouseup”,upHandler,true);
document.removeEventListener(“mousemove”,moveHandler,true);}
else
{
document.detachEvent(“onmouseup”,upHandler);
document.detachEvent(“onmousemove”,moveHandler);}
}
if(event.stopPropagation) event.stopPropagation();
else event.cancelBubble=true;
}
JavaScript事件的理解
在很多語言的學(xué)習(xí)中，“事件”都是一個(gè)比較難理解，但是又是一個(gè)很重要的概念。JavaScript中的事件處理也是一樣，正因?yàn)橛辛耸录幚?，才?huì)出現(xiàn)Ajax拖動(dòng)的效果。本文就討論一下JavaScript中的事件處理，讀過之后，您就會(huì)知道，很多Ajax框架實(shí)現(xiàn)拖動(dòng)效果的原理
給TA打賞
人已打賞
