本文實例講述了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('button click')">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事件。
設備事件。
觸摸與手勢事件。
PS：關於javascript事件的詳細說明可參考本站在線工具：
javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event
更多關於JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript窗口操作與技巧匯總》、《JavaScript中json操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。