JavaScript進階程式設計 閱讀筆記(十七) js事件

來源:互聯網
上載者:User

一、事件流

  IE中是冒泡型事件,即從最特定的事件目標到最不特定的事件目標。
  Netscape Navigator使用的是捕獲型事件,這個跟IE中採用的冒泡型事件相反。
  DOM事件流同時支援兩種事件模型,但捕獲型事件先發生。

二、事件處理函數/監聽函數

  事件是使用者或瀏覽器自身進行的特定行為。這些事件都有自己的名字,如click、load、mouseover等。
  事件處理函數有兩種分配方式:在JavaScript中或者在HTML中。
  如果在JavaScript中分配事件處理函數,則首先要獲得要處理的對象的引用,然後將函數賦值給對應的事件處理函數屬性,像這樣(事件處理函數名稱必須小寫): 複製代碼 代碼如下:var oDiv=document.getElementById("div1");
oDiv.onclick=function(){
alert("I was clicked");
}

  如果在HTML中分配事件處理函數,則只要在HTML標籤中添加事件處理函數的特徵,並在其中包含合適的指令碼作為特性值就可以了,如下: 複製代碼 代碼如下:<div onclick="alert('I was clicked')"></div>  

為了給每個可用事件分配多個事件處理函數,IE和DOM各提供了自己的方法。
  IE中每個元素和window對象都有兩個方法:attachEvent()和detachEvent(),顧名思義,前者用來給一個事件附加事件處理函數,後者用來將事件處理函數分離出來。每個方法都有兩個參數:要分配的事件處理函數名字及一個函數。如: 複製代碼 代碼如下:var fnClick=function(){
alert("Clicked");
}
var fnClick2=function(){
alert("Click2");
}
var oDiv=document.getElementById("div");
oDiv.attachEvent("onclick",fnClick);
oDiv.attachEvent("onclick",fnClick2)
oDiv.detachEvent("onclick",fnClick);
oDiv.detachEvent("onclick",fnClick2);

DOM中採用了addEventListener()和removeEventListener()來分配和移除事件處理函數。與IE不同的是這些方法有三個參數,第三個參數標識是用於冒泡階段還是捕獲階段。用於捕獲階段為true,用於冒泡階段則為false。移除時第三個參數要跟添加時保持一致。如: 複製代碼 代碼如下:var fnClick=function(){
alert("Clicked");
}
var fnClick2=function(){
alert("Click2");
}
var oDiv=document.getElementById("div");
oDiv.addEventListener("onclick",fnClick,false);
oDiv.addEventListener("onclick",fnClick2,false)
oDiv.removeEventListener("onclick",fnClick,false);
oDiv.removeEventListener("onclick",fnClick2,false);

三、事件對象

  事件對象一般包含的資訊是:引起事件的對象,事件發生時滑鼠的資訊,事件發生時鍵盤的資訊。
定位
  IE中事件對象是window對象的一個屬性event。事件處理函數必須這樣訪問事件對象: 複製代碼 代碼如下:oDiv.onclick = function(){
var oEvent=window.event;
}

DOM標準則說,event對象必須作為唯一的參數傳遞給事件處理函數。所以,在DOM相容的瀏覽器(如Mozilla、Safair、Opera)中訪問事件對象為: 複製代碼 代碼如下:oDiv.onclick=function(){
var oEvent=arguments[0];
}
//or
oDiv.onclick=function(oEvent){
}

屬性方法相似性

  1、擷取事件類型:oEvent.type
  2、擷取按鍵代碼:oEvent.keyCode
  3、檢測Shift、Alt、Ctrl鍵:oEvent.shiftKey;oEvent.altKey;oEvent.ctrlKey;
  4、擷取用戶端滑鼠座標:oEvent.clientX;oEvent.clientY;
  5、擷取螢幕座標:oEvent.screenX;oEvent.screenY;

屬性方法區別

  1、擷取目標:IE用srcElement,DOM用target;
  2、擷取按鍵字元代碼:IE用keyCode,DOM用charCode和String.fromCharCode;
  3、阻止某個事件的預設行為:IE用oEvent.returnValue=false,DOM用preventDefault()方法;
  4、停止事件冒泡:IE中用oEvent.cancelBubble=true;DOM中用oEvent.stopPropagation();

四、事件的類型

  1、滑鼠事件
  滑鼠事件包含click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove。
  事件順序:dblclick事件會先後觸發以下事件:mousedown、mouseup、click、mousedown、mouseup、click、dblclick。
  2、鍵盤事件
  鍵盤事件包括:keydown、keypress、keyup。
  事件順序:使用者按一次某字元按鍵時,會先後觸發以下事件:keydown、keypress、keyup。如果按一次某非字元按鍵時,會先後觸發以下事件:keydown、keyup。
  3、HTML事件
  HTML事件包括:load、unload、abort、error、select、change、submit、reset、resize、scroll、focus、blur。
  4、變化事件
  雖然變化事件已經是DOM標準的一部分,但是目前還沒有任何主流的瀏覽器實現了它。因此這裡只是列舉出來。
  變化事件包括:DOMSubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMNodeRemovedFromDocument、DOMNodeInsteredIntoDocument。

作者:Artwl
出處:http://artwl.cnblogs.com

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.