javascript事件那些事

博客園的 markdown效果很差  

AnimationEvent
AudioProcessingEvent
BeforeInputEvent
BeforeUnloadEvent
BlobEvent
ClipboardEvent
CloseEvent
CompositionEvent
CSSFontFaceLoadEvent
CustomEvent
DeviceLightEvent
DeviceMotionEvent
DeviceOrientationEvent
DeviceProximityEvent
DOMTransactionEvent
DragEvent
EditingBeforeInputEvent
ErrorEvent
FocusEvent
GamepadEvent
HashChangeEvent
IDBVersionChangeEvent
KeyboardEvent
MediaStreamEvent
MessageEvent
MouseEvent
MutationEvent
OfflineAudioCompletionEvent
PageTransitionEvent
PointerEvent
PopStateEvent
ProgressEvent
RelatedEvent
RTCPeerConnectionIceEvent
SensorEvent
StorageEvent
SVGEvent
SVGZoomEvent
TimeEvent
TouchEvent
TrackEvent
TransitionEvent
UIEvent
UserProximityEvent
WheelEvent

 

 

 

 

 

 

事件對象 兼容性

function(ev){ let e=window.event||ev; // IE window.event // Firefox ev }

事件監聽方法

IE8以上

添加監聽事件
element.addEventListener(eventName,fn,false); 移除監聽 element.addEventListener(eventName,fn,false); chrome51以後 支持使用第3個參數 默認都是false element.addEventListener(eventName,function(){},{ capture:false, passive:false, once:false }) capture=true 捕獲 passive=true 忽略event.preventDefault() 【針對touchstart,touchmove,wheel三個事件進行優化】 once=true 表示執行一次後就刪了removeEventListener （暫不支持）

IE9如下

element.attachEvent(eventName,methodFn) element.detachEvent(eventName,methodFn)

document.readyState屬性隨着文檔加載過程而變 ,在IE中每次狀態改變，都伴隨着Document對象上的readystatechange事件，當IE接收到readyState屬性變化爲complete狀態時 使用這個事件來作判斷是可行的

Mouse事件

事件	說明	兼容性
onclick	左鍵單擊
ondbclick	左鍵雙擊
onmousedown	左鍵按下
onmouseup	左鍵釋放
onmousemove	左鍵按下拖動
onmouseover	鼠標移入焦點區
onmouseleave	鼠標離開焦點區
onmouseenter	鼠標移入焦點區
onmouseout	鼠標移出焦點區
onmousewheel	鼠標滾輪（IE和chrome)
DOMMouseScroll	鼠標滾輪 (Firefox)
oncontextmenu	右鍵事件
ondrag	元素被拖動時運行的腳本
ondragend	在拖動操做末端運行的腳本
ondragenter	當元素已被拖放到有效拖放區域時運行的腳本
ondragleave	當元素離開有效拖放目標時運行的腳本
ondragover	當元素在有效拖放目標上正在被拖動時運行的腳本
ondragstart	在拖動操做開端運行的腳本
ondrop	當被拖元素正在被拖放時運行的腳本
onscroll	當元素滾動條，被滾動時觸發

property & method

event.button [0左鍵|1中鍵|2右鍵] event.clientX |可視區的X座標 event.clientY |可視區的Y座標 event.relatedTarget |返回與事件相關的節點 event.screenX |鼠標相對屏幕的X軸座標 event.screenY |鼠標相對屏幕的Y軸座標 event.offsetX |發生事件的元素位於座標系統中的X座標和Y座標 event.offsetY event.pageX | 相對於父元素的X座標 event.pageY | 相對於父元素的Y event.X event.Y --Method event.stopPropagation(); |禁止事件冒泡 event.preventDefault(); |禁止默認行爲 DOM2中的屬性 event.bubbles==true 是不是冒泡事件 event.cancelable==true 是否擁有可取消默認行爲 event.currentTarget 返回其事件監聽器觸發該事件的元素 event.eventPhase 返回事件傳播的當前階段 event.target 事件的對象 event.timeStamp 事件生成的日期和時間 event.type 事件的名稱 IE- event.cancelBuble=true |禁止事件冒泡 event.returnValue=false |取消默認行爲 event.srcElement | 事件元素對象的引用 event.toElement |mouseover和mouseout對事件元素的引用

鍵盤事件

事件	說明	兼容性
onkeydown	鍵盤按下
onkeyup	鍵盤釋放
onkeypress	鍵盤按下	不支持組合鍵如 ctrl+enter

property & method

event.keycode
event.altKey==1 event.ctrlkey==1 event.shiftkey==1 event.metakey==1

Touch& 觸屏事件

事件	說明	兼容性
touchstart	手指觸屏時
touchmove	手指滑動
touchend	手指離開
touchcancel	取消touch事件
onorientationchange	屏幕旋轉時觸發
gesturestart	2個手指觸屏時
gesturechange	2個手指滑動時
gestureend	2個手指離開屏幕時
deviceorientation	重力感應事件(須要支持重力感應的設備,方向控制)	alpha、beta、gamma
devicemotion	重力感應事件-加速度值（搖搖樂)	accelaraation、accelarationcludingGravity、rotationRate三件屬性

touch事件 property & method

大部份繼承 鼠標的屬性和方法 下面只列出獨有的
event.touches 位於當前屏幕上的全部手指列表 event.targetTouches 位於當前DOM上的手指列表 event.changedTouches 涉及當前事件的手指列表 event.identifier 一個數值 惟一標識id(touch session) event.scale 放大倍數 event.rotation 旋轉角度 重力感應事件的相關屬性 alpha z軸角度 beta X軸角度 gamma y軸角度 absolute 指定設備自己提供的定位數據是否與地球座標系相對應，默認爲true

From 事件

事件	說明	兼容性
onreset	表單重置時觸發
onselect	元事被選中時觸發
onsubmit
onfocus
onblur
onpropertychange	ie8 字符修改時觸發
onchange	選項有修改時觸發
oninput	有文字輸入時觸發
onformchange	表單改變時運行的腳本

DOM 事件

事件	說明	兼容性
animationEnd	css動畫結束
transitionEnd	過渡結束
onload	加載
DOMContentLoaded	dom加載
oncopy	複製 ClipboardEvent.clipboardData; （禁止copy:document.selection.empty())
oncut	剪切 ClipboardEvent.clipboardData;
onpaste	粘貼事件 ClipboardEvent.clipboardData;
onselectstart	禁止選擇dom
onunload	退出頁面事件
DOMSubtreeMOdified	DOM4 DOM樹中有任何變化都觸發該事件
DOMMNodeInserted	DOM4 DOM中有新增DOM時觸發
DOMNodeRemoved	DOM4 Dom中有移除DOM時觸發
DOMAttrModified	DOM4 DOM中有屬性修改時觸發
DOMNodeInsertedIntoDocument	DOM4在新插入的節點上面會觸發DOMNodeInsertedIntoDocument事件。這個事件不冒泡，所以必須在插入節點以前爲它添加這個事件處理程序。這個事件的目標是被插入的節點	webkit
DOMNodeRemovedFromDocument	DOM4 若是被移除的節點包含子節點，那麼在其全部子節點以及這個被移除的節點上會相繼觸發DOMNodeRemovedFromDocument事件，這個事件不會冒泡，目標target指向被移除的節點	webkit
DOMCharacterDataModified	DOM4 當文本節點的值發生變化時觸發
MutationObserver	H5新增APIwebkit DOM任何變化時觸發該事件	webkit&FF

MutationObserver

var MuObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver var target = document.getElementById('aaa'); var obs = new MuObserver(function(mutations){ mutations.forEach(function(mutation){ console.log(mutation.type); }) }) var config = {attributes:true,childList:true,characterData:true}; obs.observer(target,config); //obs.disconnect() //中止觀察

window.clipboardData IE剪切板對象來自window event.ClipboardData chrome 屬於事件對象

window 事件

事件	說明	兼容性
onload	加載事件
onreadystatechange	Ajax 異步讀取狀態變化事件
onabort	中斷
onresize	重置窗口大小
onbeforeprint	打印以前
onafterprint	打印以後
onmessage	消息觸發時
onoffline	文檔離線時運行的腳本
ononline	文檔上線時運行的腳本
onpagehide	窗口隱藏時運行
onpageshow	窗口可見時運行
onpopstate	歷史記錄改變時運行
onstorage	web storage有更新時運行
onredo	文檔從新加載時運行
onundo	文檔xiezai時運行
onunload	窗口關閉時觸發
onhashchange	hash變動事件
onstorage	localstorage事件

自定義事件相關方法

Event MDN文檔

Event.createEvent() Event.initEvent() Event.stopImmediatePropagation() Event.stopPropagation() var eventobj = new Event(事件名稱,eventInit); var es = document.createEvent('HTMLEvents'); es.initEvent(type,true,true) el.dispatchEvent(es);

多媒體相關事件

video||autio相關api說明

 

 

事件	說明	兼容性
onabort	中斷事件
oncanplay	是否能夠播放
oncanplaythrough
ondurationchange
onemptied
onerror
onloadeddata
onloadedmetadata
onloadstart	開始加載
onpause	暫停
onplay	播放
onplaying
onprogress
onratechange
onreadystatechange
onseeked
onseeking
onstalled
onsuspend
ontimeupdate
onvolumechange
onwaiting