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