国产综合精品在线,精品一区国产精品,中文在线欧美日韩视频,中文字幕制服亚洲另类

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

一、事件流

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

事件冒泡

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

事件捕獲

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

DOM事件流

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

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

二、事件處理程序

事件是用戶或?yàn)g覽器自身執(zhí)行的某種動(dòng)作，而響應(yīng)某個(gè)事件的函數(shù)就叫做事件處理程序或事件偵聽器。

HTML事件處理程序

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

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