在很多語言的學習中，“事件”都是一個比較難理解，但是又是一個很重要的概念。JavaScript中的事件處理也是一樣，正因為有了事件處理，才會出現Ajax拖動的效果。本文就討論一下JavaScript中的事件處理，讀過之后，您就會知道，很多Ajax框架實現拖動效果的原理了。
一、 IE Event對象
（一）IE Event對象的主要屬性和方法
在IE中有一個專門負責事件處理的對象Event，這個對象負責對事件的處理，含有很多的屬性和方法，通過這些方法和屬性的調用，就能完成很多的事件處理。
type：事件的類型，就是HTML標簽屬性中，沒有“on”前綴之后的字符串，例如“Click”就代表單擊事件。
srcElement：事件源，就是發生事件的元素。
button：聲明了被按下的鼠標鍵，是一個整數。1代表鼠標左鍵，2代表鼠標右鍵，4代表鼠標的中間鍵，如果按下了多個鼠標鍵，就把這些值加在一起，所以3就代表左右鍵同時按下。
clientX/clientY：是指事件發生的時候，鼠標的橫、縱坐標，返回的是整數，它們的值是相對于包容窗口的左上角生成的。
offsetX/offsetY：鼠標指針相對于源元素的位置，可以確定單擊Image對象的哪個象素。
altKey，ctrlKey，shiftKey：顧名思義，這些屬性是指鼠標事件發生的時候，是否同時按住了Alt、Ctrl或者Shift鍵，返回的是一個布爾值。
keyCode：返回keydown和keyup事件發生的時候，按鍵的代碼以及keypress事件的Unicode字符。
fromElement、toElement前者是指代mouseover事件移動過的文檔元素，后者指代mouseout事件中鼠標移動到的文檔元素。
cancelBubble：一個布爾屬性，把它設置為true的時候，將停止事件進一步起泡到包容層次的元素。
returnValue：一個布爾值屬性，設置為false的時候可以組織瀏覽器執行默認的事件動作，相當于<a href=”#” onclick=”ProcessMethod();return false;” />。
attachEvent()和detachEvent()方法：為制定DOM對象事件類型注冊多個事件處理函數的方法，它們有兩個參數，第一個是事件類型，第二個是事件處理函數。在attachEvent()事件執行的時候，this關鍵字指向的是window對象，而不是發生事件的那個元素。
?。ǘ㊣E Event對象的一些說明
1.IE Event對象是一個全局屬性
在IE中，不能把Event對象作為參數傳遞給事件處理程序，只能用window.event或者event來引用Event對象。因為在IE中，Event是window的一個屬性，也就是說event是一個全局變量，這個變量提供了事件的細節。
2.IE中事件的起泡：IE中事件可以沿著包容層次一點點起泡到上層，也就是說，下層的DOM節點定義的事件處理函數，到了上層的節點如果還有和下層相同事件類型的事件處理函數，那么上層的事件處理函數也會執行。例如，<div>標簽包含了<a>，如果這兩個標簽都有onclick事件的處理函數，那么執行的情況就是先執行<a>標簽的onclick事件處理函數，再執行<div>的事件處理函數。如果希望<a>的事件處理函數執行完畢之后，不希望執行上層的<div>的onclick的事件處理函數了，那么就把cancelBubble設置為false即可。
二、 IE中拖動DOM元素的例子
/*
該函數由mousedown事件處理調用
它為隨后發生的mousemove和mouseup事件注冊了臨時的捕捉事件處理程序
并用這些事件處理程序拖動指定的文檔元素
第二個參數必須是mousedown事件的事件對象
*/
function beginDrag(elementToDrag,event)
{
//該元素當前位于何處
//該元素的樣式性質必須具有left和top css屬性
//此外，我們假定他們用象素做單位
//var x=parseInt(elementToDrag.style.left);
//var y=parseInt(elementToDrag.style.top);
//計算一個點和鼠標點擊之間的距離，下面的嵌套的moveHandler函數需要這些值
var deltaX=event.clientX-parseInt(elementToDrag.style.left);
var deltaY=event.clientY-parseInt(elementToDrag.style.top);
// 注冊mousedown事件后發生的mousemove和mouseup事件的處理程序
// 注意，它們被注冊為文檔的捕捉事件處理程序
// 在鼠標按鈕保持按下的狀態的時候，這些事件處理程序保持活動的狀態
// 在按鈕被釋放的時候，它們被刪除
document.attachEvent("onmousemove",moveHandler);
document.attachEvent("onmouseup",upHandler);
//我們已經處理了該事件，不要讓別的元素看到它
event.cancelBubble=true;
event.returnValue=false;
/*
這是在元素被拖動時候捕捉mousemove事件的處理程序，它響應移動的元素
*/
function moveHandler(e)
{
//把元素移動到當前的鼠標位置
e=window.event;
elementToDrag.style.left=(event.clientX-deltaX)+"px";
elementToDrag.style.top=(event.clientY-deltaY)+"px";
//不要讓別的元素看到該事件
event.cancelBubble=true;
}
/*
該事件將捕捉拖動結束的時候發生的mouseup事件
*/
function upHandler(e)
{
//注銷事件處理程序
document.detachEvent("onmouseup",upHandler);
document.detachEvent("onmousemove",moveHandler);}
event.cancelBubble=true;
}
調用它的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);">
拖動我
</div>
<div>
<p>This is a test.Testing,testing</p></div>
</div>
</body>
新聞熱點
疑難解答
