JS與HTML之間的交互通過事件實現(xiàn)。事件就是文檔或瀏覽器窗口中發(fā)生的一些特定的交互瞬間?？梢允褂帽O(jiān)聽器(或處理程序)來預定事件，以便事件發(fā)生時執(zhí)行相應的代碼。這種在傳統(tǒng)軟件工程中被稱為觀察員模式，支持頁面的行為與頁面的外觀之間的松散耦合。本文將介紹JS事件相關(guān)的基礎(chǔ)知識。

一、事件流

事件流描述的是從頁面中接受事件的順序。

事件冒泡

事件開始時由最具體的元素(文檔中嵌套層次最深的那個節(jié)點)接收，然后逐級向上傳播到較為不具體的結(jié)點(文檔)。以下面HTML頁面為例，如果你點擊了頁面中的按鈕，那么”click”事件會按照< button>、< body>、< html>、document的順序傳播。換句話說，事件冒泡指的就是事件從底層觸發(fā)事件的元素開始沿著DOM樹向上傳播，直到document對象。

事件捕獲

與事件冒泡的思路相反，事件捕獲的思想是不太具體的節(jié)點應該更早地接收到事件，最具體的結(jié)點應該最后才接收事件。同樣還是上面那個例子，點擊頁面中的按鈕之后，”click”事件會按照document、< html>、< body>、< button>的順序傳播。換句話說，事件捕獲就是指事件從document對象開始沿著DOM樹向下傳播，直到事件的實際目標元素。

DOM事件流

“DOM2級事件”規(guī)定的事件包括三個階段: 事件捕獲階段、處于目標階段和事件冒泡階段。首先發(fā)生的是事件捕獲，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。

還是以之前的點擊按鈕為例，在DOM事件流中，捕獲階段，”click”事件從document開始向下傳遞到body元素(注意，實際目標button在捕獲階段不會接收到事件)。目標階段，button元素接收到”click”事件。最后，冒泡階段，事件又被傳播回文檔。

二、事件處理程序

事件是用戶或瀏覽器自身執(zhí)行的某種動作，而響應某個事件的函數(shù)就叫做事件處理程序或事件偵聽器。

HTML事件處理程序

這里的HTML事件處理程序指的是直接在HTML元素里面通過特性(attribute)定義的事件處理程序，請看下面的代碼示例。這樣是定的事件處理程序會創(chuàng)建一個封裝著元素屬性值的函數(shù)，this值等于事件的目標元素。通過這種方法指定事件處理程序存在不少缺點，不推薦使用。

JavaScript 事件流、事件處理程序及事件對象總結(jié)