摘要:中的所有事件處理器都是由提供的。事件觸發時的回調函數。一個布爾值,表示該事件是否能夠在中冒泡。注冊事件監聽的對象。對事件起源目標的引用。方法作用取消默認事件阻止事件冒泡對象。用法向派發事件寫在后面事件,是前端開發中的一個基礎。
本文首發于公眾號:符合預期的CoyPanweb中的事件
事件并不是JavaScript的核心部分,他們是在瀏覽器的Web Api中定義的。下面列舉的幾種情況,都屬于發生了事件。
用戶在某個元素上點擊鼠標或懸停光標。
用戶在鍵盤中按下某個按鍵。
用戶調整瀏覽器的大小或者關閉瀏覽器窗口。
一個網頁停止加載。
提交表單。
播放、暫停、關閉視頻。
發生錯誤。
我們可以在代碼中使用事件處理器來處理各種事件。
事件模型假設我們有這么一段html代碼:
Shady Grove | Aeolain |
Over the River, Charile | Dorian |
如果我們點擊over the Rive, Charile,整個事件流程如下:
事件會經歷三個階段,上圖中分別由紅色、藍色、綠色標出。第一階段為紅色,事件流從根元素一直走到點擊的目標元素,這個過程稱為捕獲。第二階段為藍色, 稱為目標階段。這個階段中,會處理點擊事件,為事件加上各種屬性等。第三階段為綠色,事件又回重新回到根元素,這個過程稱為冒泡。在整個事件流中,我們在事件流經過的任何元素上,都能監聽到該事件,從而進行處理。
一般建議在冒泡階段處理事件,這樣可以最大限度的兼容各種瀏覽器。
注意:blur、focus、load、unload 等幾個事件不會冒泡。事件處理原因是在于:這些事件僅發生于自身上,而它的任何父節點上的事件都不會產生,所有不會冒泡。
我們可以查看事件的bubbles屬性,來判斷該事件是否可以冒泡。
EventTarget是一個由可以接收事件的對象實現的接口,并且可以為它們創建偵聽器。Web中的所有事件處理器都是由EventTarget"提供"的。
該方法將指定的監聽器注冊到?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。
刪除使用addEventListener注冊到target上的事件。標準語法:
target.removeEventListener(type, listener[, options]); target.removeEventListener(type, listener[, useCapture]);
為了提高頁面性能,我們在處理完某事件,并且不用繼續監聽該事件時,可以將之前注冊的事件監聽函數移除。需要注意的是,如果注冊事件時,在捕獲或冒泡階段均進行了監聽,那么移除時需要分別移除。
在事件處理函數中,我們經常會使用到事件的這兩個屬性。currentTarget表示注冊事監聽的對象。target表示事件起源的對象。舉個例子:
document.getElementById("father").addeventListener("click", function(e){ console.log(e.currentTarget); console.log(e.target); });child1child2child3
我們將事件處理函數綁定在father上。現在,如果我們點擊的是child1,由于child1是事件源,那么e.target就是child1。而我們的事件處理函數是綁定在father上的,所以,e.currentTarget就是father。
這一點在開發過程中需要特別注意。
事件代理這個概念依賴于這樣一個事實,如果你想要在大量子元素中單擊任何一個都可以運行一段代碼,您可以將事件監聽器設置在其父節點上,并將事件監聽器氣泡的影響設置為每個子節點,而不是每個子節點多帶帶設置事件監聽器。舉個例子:
我們要實現點擊每一個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
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101011.html
摘要:是具有此屬性的域名不需要用戶點擊鏈接就在后臺解析,而域名解析和內容載入是串行的網絡操作,所以這個方式能減少用戶的等待時間,提升用戶體驗。 web前端性能優化主要分為以下幾個板塊: 加載優化 DNS預解析 合并img、css、javascript文件,減少http請求 緩存一切可緩存資源 使用長Cache 使用外聯式引用css、javascript文件 壓縮HTML、css、jav...
摘要:是具有此屬性的域名不需要用戶點擊鏈接就在后臺解析,而域名解析和內容載入是串行的網絡操作,所以這個方式能減少用戶的等待時間,提升用戶體驗。 web前端性能優化主要分為以下幾個板塊: 加載優化 DNS預解析 合并img、css、javascript文件,減少http請求 緩存一切可緩存資源 使用長Cache 使用外聯式引用css、javascript文件 壓縮HTML、css、jav...
摘要:前端性能優化總結資源優化緩存最好的資源優化就是不加載資源。緩存主要分為強制緩存和協商緩存。的值為服務端返回的數據到期時間。的使用教程為了保證正常的,有些渲染性能優化還是有必要的。 前端性能優化總結 資源優化 緩存 最好的資源優化就是不加載資源。緩存也是最見效的優化手段。說實話,雖然說客戶端緩存發生在瀏覽器端,但緩存主要還是服務端來控制,與我們前端關系并不是很大。但還是有必要了解一下。 ...
摘要:前端性能優化總結資源優化緩存最好的資源優化就是不加載資源。緩存主要分為強制緩存和協商緩存。的值為服務端返回的數據到期時間。的使用教程為了保證正常的,有些渲染性能優化還是有必要的。 前端性能優化總結 資源優化 緩存 最好的資源優化就是不加載資源。緩存也是最見效的優化手段。說實話,雖然說客戶端緩存發生在瀏覽器端,但緩存主要還是服務端來控制,與我們前端關系并不是很大。但還是有必要了解一下。 ...
閱讀 2508·2023-04-25 17:37
閱讀 1189·2021-11-24 10:29
閱讀 3696·2021-09-09 11:57
閱讀 692·2021-08-10 09:41
閱讀 2243·2019-08-30 15:55
閱讀 2811·2019-08-30 15:54
閱讀 1942·2019-08-30 15:53
閱讀 895·2019-08-30 15:43