事件种类有:
- abort
- beforecopy
- beforecut
- beforeload
- beforepaste
- beforeunload
- blur
- cached
- change
- checking
- click
- close
- connect
- contextmenu
- copy
- cut
- dblclick
- display
- downloading
- drag
- dragend
- dragenter
- dragleave
- dragover
- dragstart
- drop
- error
- focus
- hashchange
- input
- invalid
- keydown
- keypress
- keyup
- load
- loadstart
- message
- mousedown
- mousemove
- mouseout
- mouseover
- mouseup
- mousewheel
- noupdate
- obsolete
- offline
- online
- open
- overflowchanged
- pagehide
- pageshow
- paste
- readystatechange
- reset
- resize
- scroll
- search
- select
- selectstart
- storage
- submit
- textInput
- unload
- updateready
- zoom
- DOMActivate
- DOMAttrModified
- DOMCharacterDataModified
- DOMFocusIn
- DOMFocusOut
- DOMNodeInserted
- DOMNodeInsertedIntoDocument
- DOMNodeRemoved
- DOMNodeRemovedFromDocument
- DOMSubtreeModified
- DOMContentLoaded
- webkitBeforeTextInserted
- webkitEditableContentChanged
- canplay
- canplaythrough
- durationchange
- emptied
- ended
- loadeddata
- loadedmetadata
- pause
- play
- playing
- ratechange
- seeked
- seeking
- timeupdate
- volumechange
- waiting
- progress
- stalled
- suspend
- webkitAnimationEnd
- webkitAnimationStart
- webkitAnimationIteration
- webkitTransitionEnd
- orientationchange
当然不同的浏览器会注册不同的事件,下面我们就从webkit源码看下神奇的事件到底是什么样的
EventNames.h文件
我们看下实现
#define DOM_EVENT_NAMES_FOR_EACH(macro) \
\
macro(abort) \
macro(beforecopy) \
macro(beforecut) \
macro(beforeload) \
macro(beforepaste) \
macro(beforeunload) \
macro(blocked) \
macro(blur) \
macro(cached) \
macro(change) \
macro(chargingchange) \
macro(chargingtimechange) \
macro(checking) \
macro(click) \
macro(close) \
macro(complete) \
macro(compositionend) \
macro(compositionstart) \
macro(compositionupdate) \
macro(connect) \
macro(contextmenu) \
macro(copy) \
macro(cut) \
macro(dblclick) \
macro(devicemotion) \
macro(deviceorientation) \
macro(dischargingtimechange) \
macro(display) \
macro(downloading) \
macro(drag) \
macro(dragend) \
macro(dragenter) \
macro(dragleave) \
macro(dragover) \
macro(dragstart) \
macro(drop) \
macro(error) \
macro(focus) \
macro(focusin) \
macro(focusout) \
macro(gesturetap) \
macro(gesturetapdown) \
macro(gesturescrollstart) \
macro(gesturescrollend) \
macro(gesturescrollupdate) \
macro(hashchange) \
macro(input) \
macro(invalid) \
macro(keydown) \
macro(keypress) \
macro(keyup) \
macro(levelchange) \
macro(load) \
macro(loading) \
macro(loadingdone) \
macro(loadstart) \
macro(message) \
macro(mousedown) \
macro(mouseenter) \
macro(mouseleave) \
macro(mousemove) \
macro(mouseout) \
macro(mouseover) \
macro(mouseup) \
macro(mousewheel) \
macro(noupdate) \
macro(obsolete) \
macro(offline) \
macro(online) \
macro(open) \
macro(overflowchanged) \
macro(pagehide) \
macro(pageshow) \
macro(paste) \
macro(popstate) \
macro(readystatechange) \
macro(reset) \
macro(resize) \
macro(scroll) \
macro(search) \
macro(select) \
macro(selectstart) \
macro(selectionchange) \
macro(storage) \
macro(submit) \
macro(textInput) \
macro(unload) \
macro(updateready) \
macro(upgradeneeded) \
macro(versionchange) \
macro(visibilitychange) \
macro(write) \
macro(writeend) \
macro(writestart) \
macro(zoom) \
\
macro(DOMActivate) \
macro(DOMFocusIn) \
macro(DOMFocusOut) \
macro(DOMCharacterDataModified) \
macro(DOMNodeInserted) \
macro(DOMNodeInsertedIntoDocument) \
macro(DOMNodeRemoved) \
macro(DOMNodeRemovedFromDocument) \
macro(DOMSubtreeModified) \
macro(DOMContentLoaded) \
\
macro(webkitBeforeTextInserted) \
macro(webkitEditableContentChanged) \
\
macro(canplay) \
macro(canplaythrough) \
macro(durationchange) \
macro(emptied) \
macro(ended) \
macro(loadeddata) \
macro(loadedmetadata) \
macro(pause) \
macro(play) \
macro(playing) \
macro(ratechange) \
macro(seeked) \
macro(seeking) \
macro(timeupdate) \
macro(volumechange) \
macro(waiting) \
\
macro(addtrack) \
macro(cuechange) \
macro(enter) \
macro(exit) \
\
macro(webkitbeginfullscreen) \
macro(webkitendfullscreen) \
\
macro(webkitaddsourcebuffer) \
macro(webkitremovesourcebuffer) \
macro(webkitsourceopen) \
macro(webkitsourceended) \
macro(webkitsourceclose) \
\
macro(webkitkeyadded) \
macro(webkitkeyerror) \
macro(webkitkeymessage) \
macro(webkitneedkey) \
\
macro(progress) \
macro(stalled) \
macro(suspend) \
\
macro(webkitAnimationEnd) \
macro(webkitAnimationStart) \
macro(webkitAnimationIteration) \
\
macro(webkitTransitionEnd) \
macro(transitionend) \
\
macro(orientationchange) \
\
macro(timeout) \
\
macro(touchstart) \
macro(touchmove) \
macro(touchend) \
macro(touchcancel) \
\
macro(success) \
\
macro(loadend) \
\
macro(webkitfullscreenchange) \
macro(webkitfullscreenerror) \
\
macro(webkitspeechchange) \
\
macro(audiostart) \
macro(soundstart) \
macro(speechstart) \
macro(speechend) \
macro(soundend) \
macro(audioend) \
macro(result) \
macro(nomatch) \
macro(start) \
macro(end) \
macro(mark) \
macro(boundary) \
macro(resume) \
\
macro(webglcontextlost) \
macro(webglcontextrestored) \
macro(webglcontextcreationerror) \
\
macro(audioprocess) \
\
macro(connecting) \
macro(addstream) \
macro(removestream) \
macro(signalingstatechange) \
macro(removetrack) \
macro(mute) \
macro(unmute) \
macro(iceconnectionstatechange) \
macro(icecandidate) \
macro(negotiationneeded) \
macro(datachannel) \
macro(tonechange) \
\
macro(show) \
\
macro(webkitpointerlockchange) \
macro(webkitpointerlockerror) \
\
macro(webkitregionlayoutupdate) \
\
macro(webkitregionoversetchange) \
\
macro(webkitnetworkinfochange) \
\
macro(webkitresourcetimingbufferfull) \
\
macro(webkitdeviceproximity) \
\
macro(securitypolicyviolation) \
\
实际上对于dom 事件对应到具体的代码上面就是callback函数
在dom tree构建的时候会提前注册各个事件,事件的触发就是web引擎做的事情,举个简单的例子:
当页面刚开始加载body的时候 会触发一个onload事件,如何在网页内
<body onload="test()">
那么网页在加载到body的时候就可以直接执行test函数,那么对于网页开发者来说就可以做一些事情。
事件在表象就是这样子的。