JS與HTML之間的交互通過事件實現。事件就是文檔或瀏覽器窗口中發生的一些特定的交互瞬間?？梢允褂帽O聽器(或處理程序)來預定事件，以便事件發生時執行相應的代碼。這種在傳統軟件工程中被稱為觀察員模式，支持頁面的行為與頁面的外觀之間的松散耦合。本文將介紹JS事件相關的基礎知識。
一、事件流
事件流描述的是從頁面中接受事件的順序。
事件冒泡
事件開始時由最具體的元素(文檔中嵌套層次最深的那個節點)接收，然后逐級向上傳播到較為不具體的結點(文檔)。以下面HTML頁面為例，如果你點擊了頁面中的按鈕，那么”click”事件會按照< button>、< body>、< html>、document的順序傳播。換句話說，事件冒泡指的就是事件從底層觸發事件的元素開始沿著DOM樹向上傳播，直到document對象。
<html> <head> <title>Test</title> </head> <body> <button id="myBtn">A Btn</button> </body></html>
事件捕獲
與事件冒泡的思路相反，事件捕獲的思想是不太具體的節點應該更早地接收到事件，最具體的結點應該最后才接收事件。同樣還是上面那個例子，點擊頁面中的按鈕之后，”click”事件會按照document、< html>、< body>、< button>的順序傳播。換句話說，事件捕獲就是指事件從document對象開始沿著DOM樹向下傳播，直到事件的實際目標元素。
DOM事件流
“DOM2級事件”規定的事件包括三個階段: 事件捕獲階段、處于目標階段和事件冒泡階段。首先發生的是事件捕獲，為截獲事件提供了機會。然后是實際的目標接收到事件。最后一個階段是冒泡階段，可以在這個階段對事件做出響應。
還是以之前的點擊按鈕為例，在DOM事件流中，捕獲階段，”click”事件從document開始向下傳遞到body元素(注意，實際目標button在捕獲階段不會接收到事件)。目標階段，button元素接收到”click”事件。最后，冒泡階段，事件又被傳播回文檔。
二、事件處理程序
事件是用戶或瀏覽器自身執行的某種動作，而響應某個事件的函數就叫做事件處理程序或事件偵聽器。
HTML事件處理程序
這里的HTML事件處理程序指的是直接在HTML元素里面通過特性(attribute)定義的事件處理程序，請看下面的代碼示例。這樣是定的事件處理程序會創建一個封裝著元素屬性值的函數，this值等于事件的目標元素。通過這種方法指定事件處理程序存在不少缺點，不推薦使用。
<button onclick="alert('HaHa~')">Btn-1</button><button onclick="alert('event.type')">Btn-2</button><button onclick="handler()">Btn-3</button><script type="text/javascript"> function handler() { alert("Haha~"); }</script>
新聞熱點
疑難解答
圖片精選
