前端基礎(chǔ)—Web的事件大總結(jié)

千鋒Python學(xué)堂 2019-10-21

展開全文

web中的事件

事件并不是JavaScript的核心部分，他們是在瀏覽器的Web Api中定義的。下面列舉的幾種情況，都屬于發(fā)生了事件。

用戶在某個元素上點擊鼠標(biāo)或懸停光標(biāo)。
用戶在鍵盤中按下某個按鍵。
用戶調(diào)整瀏覽器的大小或者關(guān)閉瀏覽器窗口。
一個網(wǎng)頁停止加載。
提交表單。
播放、暫停、關(guān)閉視頻。
發(fā)生錯誤。

我們可以在代碼中使用事件處理器來處理各種事件。

事件模型

假設(shè)我們有這么一段html代碼：

<html>
 <body>
 <table>
 <tbody>
 	<tr>
 <td>Shady Grove</td>
 <td>Aeolain</td>
 </tr>
 <tr>
 	<td>Over the River, Charile</td>
 <td>Dorian</td>
 </tr>
 </tbody>
 </table>
 </body>
</html>

如果我們點擊over the Rive, Charile，整個事件流程如下：

前端基礎(chǔ)—Web的事件大總結(jié)

事件會經(jīng)歷三個階段，上圖中分別由紅色、藍(lán)色、綠色標(biāo)出。第一階段為紅色，事件流從根元素一直走到點擊的目標(biāo)元素，這個過程稱為捕獲。第二階段為藍(lán)色。這個階段中，會處理點擊事件，為事件加上各種屬性等。第三階段為綠色，事件又回重新回到根元素，這個過程稱為冒泡。在整個事件流中，我們在事件流經(jīng)過的任何元素上，都能監(jiān)聽到該事件，從而進(jìn)行處理。

一般建議在冒泡階段處理事件，這樣可以最大限度的兼容各種瀏覽器。

注意：blur、focus、load、unload 等幾個事件不會冒泡。
原因是在于：這些事件僅發(fā)生于自身上，而它的任何父節(jié)點上的事件都不會產(chǎn)生，所有不會冒泡。
我們可以查看事件的bubbles屬性，來判斷該事件是否可以冒泡。

事件處理

EventTarget

EventTarget是一個由可以接收事件的對象實現(xiàn)的接口，并且可以為它們創(chuàng)建偵聽器。Web中的所有事件處理器都是由EventTarget"提供"的。

前端基礎(chǔ)—Web的事件大總結(jié)

addEventListener

該方法將指定的監(jiān)聽器注冊到 EventTarget 上，當(dāng)該對象觸發(fā)指定的事件時，指定的回調(diào)函數(shù)就會被執(zhí)行。事件目標(biāo)可以是一個文檔上的元素 Element,Document和Window或者任何其他支持事件的對象 (比如 XMLHttpRequest)。其標(biāo)準(zhǔn)語法如下：

target.addEventListener(type, listener[, options]);

target.addEventListener(type, listener[, useCapture]);

target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
預(yù)覽

type: 字符串。表示事件類型，比如: click。
listener：函數(shù)。事件觸發(fā)時的回調(diào)函數(shù)。這個函數(shù)會接受一個Event事件對象。這個Event事件對象中，包含了以下重要的屬性和方法（這里只列舉出常用的）

前端基礎(chǔ)—Web的事件大總結(jié)

options ：對象。指定一個listener的配置參數(shù)。

前端基礎(chǔ)—Web的事件大總結(jié)

useCapture：布爾值，可選。默認(rèn)為false，事件在冒泡過程中觸發(fā)listener。

removeEventListener

刪除使用addEventListener注冊到target上的事件。標(biāo)準(zhǔn)語法：

target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);

為了提高頁面性能，我們在處理完某事件，并且不用繼續(xù)監(jiān)聽該事件時，可以將之前注冊的事件監(jiān)聽函數(shù)移除。需要注意的是，如果注冊事件時，在捕獲或冒泡階段均進(jìn)行了監(jiān)聽，那么移除時需要分別移除。

currentTarget 與 target的區(qū)別

在事件處理函數(shù)中，我們經(jīng)常會使用到事件的這兩個屬性。currentTarget表示注冊事監(jiān)聽的對象。target表示事件起源的對象。舉個例子：

<div id="father">
 	<div id="child1">child1</div>
 	<div id="child2">child2</div>
 	<div id="child3">child3</div>
</div>
document.getElementById('father').addeventListener('click', function(e){
 console.log(e.currentTarget);
 console.log(e.target);
});

我們將事件處理函數(shù)綁定在father上?，F(xiàn)在，如果我們點擊的是child1，由于child1是事件源，那么e.target就是child1。而我們的事件處理函數(shù)是綁定在father上的，所以，e.currentTarget就是father。

這一點在開發(fā)過程中需要特別注意。

事件代理

這個概念依賴于這樣一個事實,如果你想要在大量子元素中單擊任何一個都可以運行一段代碼，您可以將事件監(jiān)聽器設(shè)置在其父節(jié)點上，并將事件監(jiān)聽器氣泡的影響設(shè)置為每個子節(jié)點，而不是每個子節(jié)點單獨設(shè)置事件監(jiān)聽器。舉個例子：

<ul>
	<li>1<li>
 <li>2<li>
 <li>3<li>
 <li>4<li>
 <li>5<li>
 <li>6<li>
 <li>7<li>
 <li>8<li>
 <li>9<li>
</ul>

我們要實現(xiàn)點擊每一個li的時候，輸出li內(nèi)對應(yīng)的數(shù)字，我們當(dāng)然可以直接在所有的li上分別綁定一個事件。但是這樣會造成內(nèi)存的浪費。我們可以只在ul上綁定一個事件，根據(jù)事件的target來獲取當(dāng)前點擊的li，拿到該li內(nèi)對應(yīng)的數(shù)字。

document.querySelector('ul').addEventListener('click', function(e){
 if(e.target && e.target.nodeName === "LI") {
		console.log(e.target.innerHTML);
	}
});

自定義事件

最新的DOM標(biāo)準(zhǔn)允許我們自定義事件。直接看下面的例子。

var fakeNode = document.createElement('Coy'); // 創(chuàng)建一個自定義元素
var evt = document.createEvent('Event'); // 創(chuàng)建一個自定義事件
var evtType = 'test'; // 自定義事件的類型
// 事件監(jiān)聽函數(shù)
fakeNode.addEventListener(evtType, function(e){ 
 console.log(e); // e.type === 'test';
}, false);
// 初始化事件。
// initEvent用法：event.initEvent(type, bubbles, cancelable);
evt.initEvent(evtType, false, false); 
// 向fakeNode派發(fā)evt事件
fakeNode.dispatchEvent(evt);

寫在后面

事件，是前端開發(fā)中的一個基礎(chǔ)。雖然比較簡單，但是十分重要。本文總結(jié)了web事件的一些知識點，符合預(yù)期。