摘要:事件的定義事件就是用戶或瀏覽器自身執行的某種動作。事件在頁面中定義。用來添加和移除事件處理程序和。事件流包括三個階段事件捕獲階段,處于目標事件和事件冒泡階段。事件捕獲比如單機元素會觸發事件。事件捕獲的過程是從上到下。
事件的定義:
事件就是用戶或瀏覽器自身執行的某種動作。
網頁中的每個元素都可以產生某些可以觸發 JavaScript 函數的事件。
比如說,我們可以在用戶點擊某按鈕時產生一個 onClick 事件來觸發某個函數。事件在 HTML 頁面中定義。
事件類型
UI事件
焦點事件,當元素獲得或失去焦點時觸發
鼠標事件,
滾輪事件,使用鼠標滾輪時觸發
文本事件,在文檔中輸入文本時觸發
鍵盤事件
DOM事件的級別
DOM 0級事件(分為兩個):
1、在html標簽內寫onclick事件;
//
2、在JS寫onlicke=function(){}函數;
// document.getElementById("myButton").onclick = function () { }
DOM 2級事件:
只有一個:監聽事件。用來添加和移除事件處理程序:addEventListener()和removeEventListener()。
DOM 3級事件:
和DOM 2級事件類似,DOM 3中定義了自定義事件。
事件流
定義:從頁面中接受事件的順序。
DOM事件流包括三個階段:事件捕獲階段,處于目標事件和事件冒泡階段。
事件捕獲
比如單機
IE方式
1、attachEvent(事件名稱, 函數),綁定事件處理函數:
var btn=document.getElementById("btn");
btn.attachEvent("onclick",function(){ alert("Clicked"); });
用onclick
2、detachEvent(事件名稱, 函數),解除綁定
DOM方式
addEventListener(事件名稱,函數, 捕獲)
removeEventListener(事件名稱, 函數, 捕獲)
接收三個參數,第一個是要處理的事件名,第二個是事件處理程序,第三個值為false時表示在事件冒泡階段調用事件處理程序,一般建議在冒泡階段使用,特殊情況才在捕獲階段。
后面無論接多少函數,因為后面任何設置的屬性都會嘗試覆蓋較早的屬性.
怎么移除事件和綁定事件
DOM中的事件對象(event對象常見應用)
詳情見高程P355
自定義事件
(進階)
event = new CustomEvent(type [, eventInitDict])
事件委托
事件委托(事件代理)是利用事件冒泡,只指定一個事件處理程序來管理某一類型的所有事件。
優點:
在頁面中設置事件處理程序所需的時間更少。
整個頁面占用的內存更少,能夠提升整體性能。
缺點:
有些事件不能冒泡,blur、focus、load和unload不能像其它事件一樣冒泡。
如何實現事件委托?
----文中還有一些小問題待總結,望大佬投稿
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101999.html
摘要:三事件事件在即將離開當前頁面刷新或關閉時觸發。四事件事件在用戶退出頁面時發生。五事件該事件在存儲更新時觸發六事件該事件在窗口的瀏覽歷史對象發生改變時觸發七事件事件在用戶中止加載或元素時觸發。 將前段時間自己用到的,比較少見,但是功能很強大的事件在這里總結下,一來自己重新梳理歸檔下,二來,沒用過的同學也可以嘗試用下。其實,這些都是基礎知識,但是基礎是最重要的。還記得老師說過:基礎不牢,地...
摘要:問題初探索刪掉那一點重寫的代碼后,表現符合預期了。每一次都重新造一個虛擬的,然后監聽其自定義事件,并且立即觸發這個自定義事件。真的不要隨便重寫原生方法。。。于是,我全面總結一下了中的事件系統,也算是對基礎的鞏固。 寫在前面 前段時間,我寫過一篇文章前端開發中的Error以及異常捕獲。 在文章中,我提到了這個問題: showImg(https://segmentfault.com/img...
摘要:前言在編程藝術中初步實現的圖片庫的總結一中,有很多不足之處比如事件處理嵌套在中,顯得如此笨重和屌絲沒有對函數進行相應的安全檢查等,本篇文章對上述問題做了全面的升級。 前言:在《DOM編程藝術》中初步實現的圖片庫的總結(一)中,有很多不足之處:比如事件處理嵌套在HTML中,顯得如此笨重和屌絲;沒有對showPic函數進行相應的安全檢查等,本篇文章對上述問題做了全面的升級。--------...
摘要:前言對于前端的性能話題,從來都沒有斷絕過。作為一個前端開發者,性能是我們關注的指標。前端發展以來,優化方式,琳瑯滿目,有雅虎軍規等。所以,接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。 前言 對于前端的性能話題,從來都沒有斷絕過。因為這個東西沒有最好,只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者,性能是我們關注的指標。它直接影響著我們...
摘要:前言對于前端的性能話題,從來都沒有斷絕過。作為一個前端開發者,性能是我們關注的指標。前端發展以來,優化方式,琳瑯滿目,有雅虎軍規等。所以,接下來我會從三個方面就前端性能進行總結網絡方面操作及渲染方面數據方面。 前言 對于前端的性能話題,從來都沒有斷絕過。因為這個東西沒有最好,只有更好。而且往往也是業務的繁雜程度去決定優化程度的。作為一個前端開發者,性能是我們關注的指標。它直接影響著我們...
閱讀 3588·2021-09-13 10:28
閱讀 1937·2021-08-10 09:43
閱讀 1010·2019-08-30 15:44
閱讀 3178·2019-08-30 13:14
閱讀 1830·2019-08-29 16:56
閱讀 2938·2019-08-29 16:35
閱讀 2843·2019-08-29 12:58
閱讀 864·2019-08-26 13:46