資訊專欄INFORMATION COLUMN
摘要：事件有很多，有我用過的有我沒用過的，今天我想分析一番。阻止默認(rèn)事件，表單提交，標(biāo)簽。觸發(fā)事件的元素，事件委托會(huì)用到。在文本插入文本框之前會(huì)觸發(fā)事件。
一個(gè)網(wǎng)頁由三層組成（html 結(jié)構(gòu)，js 行為，css 表現(xiàn)），一切的東西其實(shí)都建立在html上，html里面的dom提供了一些事件，然后通過js封裝，我們可以用js去調(diào)用dom上的事件。事件有很多，有我用過的有我沒用過的，今天我想分析一番。
事件流我們都知道，有兩種事件流，一個(gè)是冒泡一個(gè)是捕獲。
捕獲就是從body開始到你觸發(fā)事件的節(jié)點(diǎn)，從外到內(nèi)的一個(gè)過程。
冒泡呢，與之相反，從你觸發(fā)的節(jié)點(diǎn)開始，一級(jí)一級(jí)往外，直到body，是一個(gè)從內(nèi)到外的過程。
那么他們兩個(gè)是同時(shí)進(jìn)行的嗎？他們的順序是先捕獲，再冒泡。
在addEventListener中addEventListener（event事件名稱，function回調(diào)函數(shù)，是否在捕獲或冒泡階段執(zhí)行）第三個(gè)參數(shù)可以改變事件觸發(fā)時(shí)機(jī)。
事件對(duì)象 eventdiv.onclick=function(event){}這個(gè)里面的event就是事件對(duì)象，我這里說幾個(gè)常用的。
event.preventDefault() //阻止默認(rèn)事件，表單提交，a標(biāo)簽。 event.stopPropagation() //阻止傳遞下去，一幫用在一些自定義組件上，比如遮罩隱藏，在彈框上就要阻止傳遞了。 event.target //觸發(fā)事件的元素，事件委托會(huì)用到。事件名稱
下面我會(huì)把事件列舉一下
通用事件
load 加載成功，window.load(function(){}),還有一個(gè)與之類似的DOMContentLoad當(dāng)DOM加載完成之后觸發(fā)。
unload 與之相反，卸載的時(shí)候
error 發(fā)送錯(cuò)誤的時(shí)候，這個(gè)比較有意思。img觸發(fā)error之后使用一張占位圖。監(jiān)聽全局的錯(cuò)誤提示，然后統(tǒng)計(jì)匯總，比如fundebug，也可以自己根據(jù)特性寫一個(gè)針對(duì)公司項(xiàng)目的。
scroll 滾動(dòng)的時(shí)候觸發(fā)，無限滾動(dòng)之類的一些效果
resize 放大縮小窗口的時(shí)候發(fā)生變化，和上面的scroll都需要注意去抖，
鼠標(biāo)事件 傳送門，去看鼠標(biāo)事件
click 單擊事件，在DOM上單擊鼠標(biāo)時(shí)候觸發(fā)。用戶在完成一次mousedown和mouseup之后觸發(fā)click。觸發(fā)順序是：mousedown -> mouseup -> click。
mousedown和mouseup 鼠標(biāo)按下和彈起，使用頻率不是很高。可以做一下拖動(dòng)之類的效果。
mouseout和mouseover 鼠標(biāo)移出和移入，使用起來會(huì)有冒泡的問題，可以使用延時(shí)的方法解決
mouseleave和mouseenter 鼠標(biāo)移除和移除，解決了冒泡的問題。
mousemove 鼠標(biāo)移動(dòng)
鍵盤通用事件
keydown 按下鍵盤
keypress 中間的一個(gè)事件
keyup 抬起鍵盤
textInput 是對(duì)keypress的補(bǔ)充，用意是在將文本顯示給用戶之前更容易攔截文本。在文本插入文本框之前會(huì)觸發(fā)textInput事件。
compositionstart 在IME的文本復(fù)合系統(tǒng)打開時(shí)觸發(fā)，表示要開始輸入了。當(dāng)你使用輸入法的時(shí)候會(huì)觸發(fā)一下
compositionupdate 在向輸入字段中插入新字符時(shí)觸發(fā)。
compositionend 在IME的文本復(fù)合系統(tǒng)關(guān)閉時(shí)觸發(fā)，表示返回正常鍵盤的輸入狀態(tài)。
控件事件
input 當(dāng)內(nèi)容發(fā)生改變的時(shí)觸發(fā)，有可能是代碼觸發(fā)的改動(dòng)兼容ie的話input propertychange
change 當(dāng)失去焦點(diǎn)時(shí)，內(nèi)容改變觸發(fā)
blur 失去焦點(diǎn)觸發(fā)
focus 獲得焦點(diǎn)觸發(fā)
DOM變動(dòng)事件
這類事件我沒有用到過，前段時(shí)間在網(wǎng)上看到了一些，整合一下寫寫測(cè)試測(cè)試地址
DOMNodeInserted 插入節(jié)點(diǎn)時(shí)觸發(fā)，appendChild這種
DOMNodeRemoved 移除節(jié)點(diǎn)時(shí)觸發(fā)，removeChild
DOMSubtreeModified 發(fā)生變化最后會(huì)觸發(fā)
DOMNodeInsertedIntoDocument
DOMAttrModified
DOMCharacterDataModified
觸摸事件 移動(dòng)端
touchstart 觸摸
touchmove 觸摸時(shí)移動(dòng)
touchend 移開
手勢(shì) gesturestart - gesturechange - gestureend
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/84262.html
摘要：常見應(yīng)用則是為了完成一些更新應(yīng)用程序狀態(tài)的較小的任務(wù)，如處理的回調(diào)和的修改，以便讓這些任務(wù)在瀏覽器重新渲染之前執(zhí)行。常見應(yīng)用執(zhí)行順序的實(shí)現(xiàn)需要至少一個(gè)和至少一個(gè)。 簡(jiǎn)介 我們?cè)谏弦黄?《淺析 JS 中的EventLoop 事件循環(huán)》 中提到一個(gè) Event Queue，其實(shí)在事件循環(huán)中 queue 一共有兩種，還有一種叫 Job Queue 其中 Event Queue 在 HTML...
摘要：同時(shí)，如果執(zhí)行的過程中發(fā)現(xiàn)其他函數(shù)，繼續(xù)入棧然后執(zhí)行。上面我們討論的其實(shí)都是同步代碼，代碼在運(yùn)行的時(shí)候只用調(diào)用棧解釋就可以了。 序 Event Loop 這個(gè)概念相信大家或多或少都了解過，但是有一次被一個(gè)小伙伴問到它具體的原理的時(shí)候，感覺自己只知道個(gè)大概印象，于是計(jì)劃著寫一篇文章，用輸出倒逼輸入，讓自己重新學(xué)習(xí)這個(gè)概念，同時(shí)也能幫助更多的人理解它~ 概念 JavaScript 是一門 ...
摘要：可以發(fā)送通知消息以再次吸引用戶并留住他們。在即時(shí)通訊等使用情形中，一條消息可將最多的有效負(fù)載傳送至客戶端應(yīng)用。瀏覽器的的消息推送主要依賴，服務(wù)端消息推送傳遞到，然后再由推送到客戶端。 引言 Progressive Web App, 簡(jiǎn)稱 PWA，是提升 Web App 的體驗(yàn)的一種新方法，能給用戶原生應(yīng)用的體驗(yàn)。Service Worker 是 PWA 中的重要一部分。Service ...
閱讀 2618·2021-11-16 11:40
閱讀 3414·2021-11-08 13:26
閱讀 881·2021-10-28 09:32
閱讀 3538·2021-09-13 10:26
閱讀 812·2019-08-30 15:55
閱讀 785·2019-08-30 15:44
閱讀 1914·2019-08-30 15:44
閱讀 1760·2019-08-30 13:48
