本文首發於公衆號:符合預期的CoyPan
web中的事件
事件並不是JavaScript
的核心部分,他們是在瀏覽器的Web Api
中定義的。下面列舉的幾種情況,都屬於發生了事件。
- 用戶在某個元素上點擊鼠標或懸停光標。
- 用戶在鍵盤中按下某個按鍵。
- 用戶調整瀏覽器的大小或者關閉瀏覽器窗口。
- 一個網頁停止加載。
- 提交表單。
- 播放、暫停、關閉視頻。
- 發生錯誤。
我們可以在代碼中使用事件處理器
來處理各種事件。
事件模型
假設我們有這麼一段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
,整個事件流程如下:
事件會經歷三個階段,上圖中分別由紅色、藍色、綠色標出。第一階段爲紅色,事件流從根元素一直走到點擊的目標元素,這個過程稱爲捕獲
。第二階段爲藍色。這個階段中,會處理點擊事件,爲事件加上各種屬性等。第三階段爲綠色,事件又回重新回到根元素,這個過程稱爲冒泡
。在整個事件流中,我們在事件流經過的任何元素上,都能監聽到該事件,從而進行處理。
一般建議在冒泡階段處理事件,這樣可以最大限度的兼容各種瀏覽器。
注意:blur、focus、load、unload 等幾個事件不會冒泡。原因是在於:這些事件僅發生於自身上,而它的任何父節點上的事件都不會產生,所有不會冒泡。
我們可以查看事件的bubbles屬性,來判斷該事件是否可以冒泡。
事件處理
EventTarget
EventTarget
是一個由可以接收事件的對象實現的接口,並且可以爲它們創建偵聽器。Web中的所有事件處理器都是由EventTarget
"提供"的。
addEventListener
該方法將指定的監聽器註冊到 EventTarget
上,當該對象觸發指定的事件時,指定的回調函數就會被執行。 事件目標可以是一個文檔上的元素 Element
,Document
和Window
或者任何其他支持事件的對象 (比如 XMLHttpRequest
)。其標準語法如下:
target.addEventListener(type, listener[, options]);
target.addEventListener(type, listener[, useCapture]);
- type: 字符串。表示事件類型,比如: click。
-
listener:函數。事件觸發時的回調函數。這個函數會接受一個
Event
事件對象。這個Event
事件對象中,包含了以下重要的屬性和方法(這裏只列舉出常用的)屬性 值 bubbles 只讀。一個布爾值,表示該事件是否能夠在DOM中冒泡。 cancelBubble 通過在一個事件處理程序返回前設置這個屬性的值爲真,來阻止事件冒泡。 cancelable 只讀。一個布爾值,用來表示這個事件是否可以取消。 currentTarget 只讀。註冊事件監聽的對象。 target 只讀。對事件起源目標的引用。 方法 作用 preventDefault 取消默認事件 stopPropagation 阻止事件冒泡
-
options :對象。指定一個
listener
的配置參數。屬性 值 capture 布爾值。如果爲true,表示該listener會在捕獲過程中執行。如果爲false,listener會在冒泡過程中執行。默認爲false。 once 布爾值。默認爲false。如果爲true,listener只會執行一次,並且執行後會被自動移除。 passive 布爾值。如果爲true,則無法調用preventDefault來阻止默認事件。默認爲false。這個屬性有一個需要注意的地方。在safari瀏覽器的頁面滾動事件中,這個值是默認的true。所以要阻止safari中的頁面滾動,需要手動將這個值設爲false。 - useCapture:布爾值,可選。默認爲
false
,事件在冒泡過程中觸發listener
。
removeEventListener
刪除使用addEventListener
註冊到target
上的事件。標準語法:
target.removeEventListener(type, listener[, options]);
target.removeEventListener(type, listener[, useCapture]);
爲了提高頁面性能,我們在處理完某事件,並且不用繼續監聽該事件時,可以將之前註冊的事件監聽函數移除。需要注意的是,如果註冊事件時,在捕獲或冒泡階段均進行了監聽,那麼移除時需要分別移除。
currentTarget 與 target的區別
在事件處理函數中,我們經常會使用到事件的這兩個屬性。currentTarget
表示註冊事監聽的對象。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);
});
我們將事件處理函數綁定在father
上。現在,如果我們點擊的是child1
,由於child1
是事件源,那麼e.target
就是child1
。而我們的事件處理函數是綁定在father
上的,所以,e.currentTarget
就是father
。
這一點在開發過程中需要特別注意。
事件代理
這個概念依賴於這樣一個事實,如果你想要在大量子元素中單擊任何一個都可以運行一段代碼,您可以將事件監聽器設置在其父節點上,並將事件監聽器氣泡的影響設置爲每個子節點,而不是每個子節點單獨設置事件監聽器。舉個例子:
<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>
我們要實現點擊每一個li
的時候,輸出li
內對應的數字,我們當然可以直接在所有的li
上分別綁定一個事件。但是這樣會造成內存的浪費。我們可以只在ul
上綁定一個事件,根據事件的target
來獲取當前點擊的li
,拿到該li
內對應的數字。
document.querySelector('ul').addEventListener('click', function(e){
if(e.target && e.target.nodeName === "LI") {
console.log(e.target.innerHTML);
}
});
自定義事件
最新的DOM
標準允許我們自定義事件。直接看下面的例子。
var fakeNode = document.createElement('Coy'); // 創建一個自定義元素
var evt = document.createEvent('Event'); // 創建一個自定義事件
var evtType = 'test'; // 自定義事件的類型
// 事件監聽函數
fakeNode.addEventListener(evtType, function(e){
console.log(e); // e.type === 'test';
}, false);
// 初始化事件。
// initEvent用法:event.initEvent(type, bubbles, cancelable);
evt.initEvent(evtType, false, false);
// 向fakeNode派發evt事件
fakeNode.dispatchEvent(evt);
寫在後面
事件,是前端開發中的一個基礎。雖然簡單,但是十分重要。
歡迎關注我的公衆號: 符合預期的CoyPan
做一名符合預期的FE