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