JavaScript事件用法淺析

本文實例講述了JavaScript事件用法。分享給大家參考，具體如下：

JavaScript透過事件與HTML互動。

事件流

事件流規定了事件的觸發規則和順序。 DOM2規定了事件流包括三個階段：事件捕獲 -> 目標觸發除 -> 事件冒泡。 DOM2規定在事件擷取階段不應呼叫事件處理程序，不過各大瀏覽器都不鳥它。 DOM2級的事件處理程序操作函數對：addEventListener和removeEventListener的第三個參數則把這種事變成了DIY，這是一種妥協，同時讓初學者認為dom的管理一片混亂。

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},false);
document.body.addEventListener("click",function(){alert("body");},false);

   

更新上述js中addEventListener和removeEventListener中的第三個參數為true，對比為false時的效果，便大約能理解事件流了。

事件

事件是使用者或瀏覽器本身執行的某一和動作。

事件處理程序的新增方式

回應事件的函數稱為事件處理程序。

指定事件處理程序有下列方式：

HTML特性指定。

如果某個元素支援某個事件，那麼就有一個對應的HTML特性，用此特性就可以給其添加事件處理程序 。

<button id="btn" onclick="alert(&#39;button click&#39;)">button</button>

   

DOM0級。 將一個函數賦值給一個元素的事件處理程序屬性：這是使用js指定事件生理程序的傳統方式，至今仍被使用。

var btn = document.getElementById("btn");
btn.onmouseover = function(){
 this.innerHTML="按钮";
};

   

DOM2級。

透過addEventListener和removeEventListener來管理元素的事件。所有DOM節點都包含這兩個方法，它們都包含三個參數，以add為例：

addEventListener(事件名，事件處理函數，是否在事件捕獲時執行事件處理程序)

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove，它完全没有用，这两个匿名函数实际上是不同的对象
btn.removeEventListener("click",function(){alert(this.id);},true);

   

在上面程式碼中，指向同一物件的引用被認為是相同的，同樣的申明生成的是兩個外表相同但是儲存在堆上兩個不同位置的不同物件。

事件物件

DOM上的事件被觸發時，會產生一個事件物件event。無論指定了什麼事件處理程序都會傳入event物件：精確的來說，event物件是在呼叫執行函數的執行環境中建立的，根據作用域鏈的定義，可知它是如何傳入的。

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//点击btn按钮时，弹出msg:click

   

event包含豐富的成員，用來控制存取事件，以下是所有事件的共同成員。

target：觸發事件的動作直接作用的目標元素。
currentTarget：等於this，事件處理程序作用於的元素。
eventPhase：呼叫事件處理程序時，所處的事件流中的階段。 1，2，3 三個值分別對應事件流三階段。
type：事件類型。點選事件對應 String: "click"。

事件類型

事件類型分為以下幾類：

UI事件。
焦點事件。
滑鼠與滾輪事件。
鍵盤與文字事件。
複合事件。
變動事件。
HTML5事件。
設備事件。
觸摸與手勢事件。