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