DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 理解JavaScript中的事件
理解JavaScript中的事件
編輯:關於JavaScript     
在很多語言的學習中,“事件”都是一個比較難理解,但是又是一個很重要的概念。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對象,而不是發生事件的那個元素。
  (二)IE 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-

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved