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

JavaScript通過事件與HTML交互。

事件流

事件流規(guī)定了事件的觸發(fā)規(guī)則和順序。DOM2規(guī)定了事件流包括三個階段：事件捕獲 -> 目標(biāo)觸發(fā)除 -> 事件冒泡。DOM2規(guī)定在事件捕獲階段不應(yīng)調(diào)用事件處理程序，不過各大瀏覽器都不鳥它。DOM2級的事件處理程序操作函數(shù)對：addEventListener和removeEventListener的第三個參數(shù)則把這種事變成了DIY，這是一種妥協(xié)，同時讓初學(xué)者認(rèn)為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中的第三個參數(shù)為true，對比為false時的效果，便大約能理解事件流了。

事件

事件是用戶或?yàn)g覽器自身執(zhí)行的某和動作。

事件處理程序的添加方式

響應(yīng)事件的函數(shù)稱為事件處理程序。

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

HTML特性指定。

如果某個元素支持某個事件，那么就有一個對應(yīng)的HTML特性，用此特性就可以給其添加事件處理程序 。

<button id="btn" onclick="alert('button click')">button</button>

DOM0級。 將一個函數(shù)賦值給一個元素的事件處理程序?qū)傩裕哼@是使用js指定事件生理程序的傳統(tǒng)方式，至今仍被使用。

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

DOM2級。

通過addEventListener和removeEventListener來管理元素的事件。所有DOM節(jié)點(diǎn)都包含這兩個方法，它們都包含三個參數(shù)，以add為例：

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

var btn = document.getElementById("btn");
btn.addEventListener("click",function(){alert(this.id);},true);
//注意下面的remove，它完全沒有用，這兩個匿名函數(shù)實(shí)際上是不同的對象
btn.removeEventListener("click",function(){alert(this.id);},true);

在上面代碼中，指向同一對象的引用被認(rèn)為是相同的，同樣的申明生成的是兩個外表相同但是存儲在堆上兩個不同位置的不同對象。

事件對象

DOM上的事件被觸發(fā)時，會生成一個事件對象event。無論指定了什么事件處理程序都會傳入event對象：準(zhǔn)確的地說，event對象是在調(diào)用執(zhí)行函數(shù)的執(zhí)行環(huán)境中創(chuàng)建的，根據(jù)作用域鏈的定義，可知它是如何傳入的。

var btn = document.getElementById("btn");
var btnClick = function(){
 alert(event.type);
}
btn.onclick = btnClick;//點(diǎn)擊btn按鈕時，彈出msg:click

event包含豐富的成員，用來控制訪問事件，下面是所有事件的共有成員。

target：觸發(fā)事件的動作直接作用的目標(biāo)元素。
currentTarget：等于this，事件處理程序作用于的元素。
eventPhase：調(diào)用事件處理程序時，所處的事件流中的階段。1，2，3 三個值分別對應(yīng)事件流三階段。
type：事件類型。單擊事件對應(yīng) String: "click"。

事件類型

事件類型分為以下幾類：

UI事件。
焦點(diǎn)事件。
鼠標(biāo)與滾輪事件。
鍵盤與文本事件。
復(fù)合事件。
變動事件。
HTML5事件。
設(shè)備事件。
觸摸與手勢事件。

PS：關(guān)于javascript事件的詳細(xì)說明可參考本站在線工具：

javascript事件與功能說明大全：
http://tools.jb51.net/table/javascript_event

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript窗口操作與技巧匯總》、《JavaScript中json操作技巧總結(jié)》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

最新評論