大家好，我是皮皮。

前言

我們知道在很多編程語言都有事件這個(gè)概念，在JavaScript中同樣存在事件，原因也很簡單，我們知道HTML是頁面結(jié)構(gòu)層，相當(dāng)于人的骨架；

CSS是樣式層，相當(dāng)于人的外形；但是它是靜態(tài)的，一個(gè)人應(yīng)該能動，動起來，所以產(chǎn)生了JavaScript；JavaScript就是用來控制頁面元素，與用戶產(chǎn)

生動態(tài)交互效果，才構(gòu)成了如今這豐富多樣化的界面。今天我們就來認(rèn)識一下js當(dāng)中的事件；

一、事件相關(guān)概念

事件：指用戶的鼠標(biāo)動作和鍵盤動作，document的load和unloaded，事件被封裝成一個(gè)event對象，包含了該事件發(fā)生時(shí)的所有相關(guān)信息（event的屬性）以及可以對事件進(jìn)行的操作（event的方法）。

比如點(diǎn)擊頁面上一個(gè)按鈕，產(chǎn)生的event對象如下：

以上可以看到是一個(gè)MouseEvent對象，包含了一系列屬性，如鼠標(biāo)點(diǎn)擊的位置等。

敲擊鍵盤時(shí)產(chǎn)生的event對象

window．onload監(jiān)聽函數(shù)中打印出event對象如下：

注意：Event 類是MouseEvent、KeyboardEvent的父類；

二、事件對象常用屬性和方法

2．1事件定位相關(guān)屬性

MouseEvent對象里的屬性，很多帶X／Y，它們都和事件的位置相關(guān)。具體包括：x／y、clientX／clientY、pageX／pageY、screenX／screenY、layerX／layerY、offsetX／offsetY 六對；之所以能有這么多是因?yàn)楦鳛g覽器廠商在版本更迭的時(shí)候產(chǎn)生了很多不一致：

以移動鼠標(biāo)為例：

x屬性Y屬性功能xY距瀏覽器可視區(qū)域（工具欄除外區(qū)域）左／上的距離；clientXclientY距瀏覽器可視區(qū)域（工具欄除外區(qū)域）左／上的距離（同上）；screenXscreenY距計(jì)算機(jī)顯示器左／上的距離，拖動你的瀏覽器窗口位置可以看到變化；offsetXoffsetY距有定位屬性的父元素左／上的距離；（不計(jì)算邊框）pageXpageY距頁面左／上的距離，它與clientX／clientY的區(qū)別是不隨滾動條的位置變化；layerXlayerY距有定位屬性的父元素左／上的距離（計(jì)算邊框）；

之所以有那么多值一樣的情況，就是由于瀏覽器兼容的原因， 針對于瀏覽器對于不同屬性的兼容情況如下所示；（＋支持，－不支持）

瀏覽器offsetX／offsetYx／ylayerX／layerYpageX／pageYclientX／clientYscreenX／screenYW3C－－－－＋＋I(xiàn)E＋＋－－＋＋Firefox－－＋＋＋＋Opera＋＋－＋＋＋Safari＋＋＋＋＋＋chrome＋＋
＋＋＋

2．2其他常用屬性

target：發(fā)生事件的節(jié)點(diǎn)；

currentTarget：當(dāng)前正在處理的事件的節(jié)點(diǎn)，在事件捕獲或冒泡階段；

timeStamp：事件發(fā)生的時(shí)間，時(shí)間戳。

bubbles：事件是否冒泡。

cancelable：事件是否可以用preventDefault（）方法來取消默認(rèn)的動作；

keyCode：按下的鍵的值；

2．3 event對象的方法

event． preventDefault（）： 阻止元素默認(rèn)的行為，如鏈接的跳轉(zhuǎn)、表單的提交；

event． stopPropagation（）： 阻止事件冒泡；

event．initEvent（）： 初始化新事件對象的屬性，自定義事件會用，不常用；

event． stopImmediatePropagation（）： 可以阻止掉同一事件的其他優(yōu)先級較低的偵聽器的處理很少使用；

三、事件的三種模型

3．1 原始事件模型（DOM0級）

在原始事件模型中，事件發(fā)生后沒有傳播的概念，沒有事件流。事件發(fā)生，馬上處理。監(jiān)聽函數(shù)只是元素的一個(gè)屬性值，通過指定元素的屬性值來綁定監(jiān)聽器。書寫方式有兩種：

HTML代碼中指定屬性值：

＜input type＝＂button＂ onclick＝＂func1（）＂ ／＞

在js代碼中指定屬性值：

document．getElementsByTagName（‘input’）［0］．onclick ＝ func1

優(yōu)點(diǎn)：所有瀏覽器都兼容

缺點(diǎn)：

邏輯與顯示沒有分離；

相同事件的監(jiān)聽函數(shù)只能綁定一個(gè)，后綁定的會覆蓋掉前面的，如：a．onclick ＝ func1； a．onclick ＝ func2；將只會執(zhí)行func2中的內(nèi)容；

無法通過事件的冒泡、委托等機(jī)制完成更多事情；

3．2 IE事件模型

“IE不把該對象傳入事件處理函數(shù)，由于在任意時(shí)刻只會存在一個(gè)事件，所以IE把它作為全局對象window的一個(gè)屬性”，用IE8執(zhí)行了代碼alert（window．event），結(jié)果彈出是null，說明該屬性已經(jīng)定義，只是值為null（與undefined不同），代碼如下；

window．onload ＝ function （）｛alert（window．event）；｝

setTimeout（function（）｛alert（window．event）；｝，2000）；

第一次彈出【object event】，兩秒后彈出依然是null。由此可見IE是將event對象在處理函數(shù)中設(shè)為window的屬性，一旦函數(shù)執(zhí)行結(jié)束，便被置為null了；

IE的事件模型只有兩步：

先執(zhí)行元素的監(jiān)聽函數(shù)，

然后事件沿著父節(jié)點(diǎn)一直冒泡到document。

IE模型下的事件監(jiān)聽方式比較獨(dú)特，綁定監(jiān)聽函數(shù)的方法是：

attachEvent（ ＂eventType＂，＂handler＂）；／／其中evetType為事件的類型，

如onclick，注意要加’on’。解除事件監(jiān)聽器的方法是：

detachEvent（＂eventType＂，＂handler＂ ）

IE的事件模型已經(jīng)可以解決原始模型的三個(gè)缺點(diǎn)，但其自己的缺點(diǎn)就是兼容性，只有IE系列瀏覽器才可以這樣寫。

3．2 DOM2事件模型

此模型是W3C制定的標(biāo)準(zhǔn)模型，既然是標(biāo)準(zhǔn)，現(xiàn)代瀏覽器（指IE6～8除外的瀏覽器）都已經(jīng)遵循這個(gè)規(guī)范。W3C制定的事件模型中，一次事件的發(fā)生包含三個(gè)過程：

capturing phase：事件捕獲階段。事件被從document一直向下傳播到目標(biāo)元素，在這過程中依次檢查經(jīng)過的節(jié)點(diǎn)是否注冊了該事件的監(jiān)聽函數(shù)，若有則執(zhí)行；

target phase：事件處理階段。事件到達(dá)目標(biāo)元素，執(zhí)行目標(biāo)元素的事件處理函數(shù)；

bubbling phase：事件冒泡階段。事件從目標(biāo)元素上升一直到達(dá)document，同樣依次檢查經(jīng)過的節(jié)點(diǎn)是否注冊了該事件的監(jiān)聽函數(shù)，有則執(zhí)行；

所有的事件類型都會經(jīng)歷captruing phase但是只有部分事件會經(jīng)歷bubbling phase階段，例如submit事件就不會被冒泡。

標(biāo)準(zhǔn)的事件監(jiān)聽器綁定：

addEventListener（＂eventType＂，＂handler＂，＂true｜false＂）；

其中eventType指事件類型。第二個(gè)參數(shù)是處理函數(shù)，第三個(gè)即用來指定是否在捕獲階段進(jìn)行處理，一般設(shè)為false來與IE保持一致。

監(jiān)聽器的解除也類似：

removeEventListner（＂eventType＂，＂handler＂，＂true！false＂）；

以上便是事件的三種模型，我們在開發(fā)的時(shí)候需要兼顧IE與非IE瀏覽器，所以注冊一個(gè)監(jiān)聽器應(yīng)該這樣寫：

四、總結(jié)

本文我們就JavaScript事件做了基本介紹，認(rèn)識了事件的相關(guān)概念，事件的常用屬性和方法，以及事件的三種模型，想要完成復(fù)雜的界面動態(tài)交互效果，事件的使用至關(guān)重要，想要深入了解事件的小伙伴可以參考官方手冊。