JavaScript通過事件與HTML交互。

事件流

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

事件

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

事件處理程序的添加方式

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

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

HTML特性指定。

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

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

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

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

DOM2級(jí)。

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

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

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

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

事件對(duì)象

DOM上的事件被觸發(fā)時(shí)，會(huì)生成一個(gè)事件對(duì)象event。無論指定了什么事件處理程序都會(huì)傳入event對(duì)象：準(zhǔn)確的地說，event對(duì)象是在調(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按鈕時(shí)，彈出msg:click

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

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

事件類型

事件類型分為以下幾類：

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