dom event简介
Event接口表示在DOM中发生的任何事件; 一些是用户生成的(例如鼠标或键盘事件),而其他由API生成(例如指示动画已经完成运行的事件,视频已被暂停等等)。事件添加有以下几个方法:
- EventTarget.addEventListener
注意: Internet Explorer 6-8 并不支持这个方法,而是提供了类似的 element.attachEvent API 。如果要进行跨浏览器使用,请考虑使用有效的JavaScript 库。 - html的属性添加
- myButton.onclick = function(event){alert('Hello world');};
事件添加目标就是EventTarget,也是注册事件的监听者。有的时候注册事件的监听者并不是事件的触发者,实际事件的触发者是event.target,
EventTarget事件目标
EventTarget 是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。
Element,document 和 window 是最常见的事件目标,但是其他对象也可以是事件目标,比如XMLHttpRequest,AudioNode,AudioContext 等等。EventTarget实例主要需要实现下面三个方法:
- EventTarget.addEventListener()
在EventTarget上注册特定事件类型的事件处理程序。 - EventTarget.removeEventListener()
EventTarget中删除事件侦听器。 - EventTarget.dispatchEvent()
将事件分派到此EventTarget。
不少情况下,EventTarget就是注册的事件的监听者;
event实例
有许多类型的事件,其中一些使用基于主要事件接口的其他接口。事件本身包含所有事件通用的属性和方法。在添加注册事件的时候,事件响应一般是一个函数,而函数的第一个参数就是event,一个真实的事件对象的打印如下:
altKey:false
bubbles:true
button:0
buttons:0
cancelBubble:false
cancelable:true
clientX:30
clientY:62
composed:true
ctrlKey:false
currentTarget:button#myBtn
defaultPrevented:false
detail:1
eventPhase:0
fromElement:null
isTrusted:true
layerX:30
layerY:62
metaKey:false
movementX:0
movementY:0
offsetX:20
offsetY:6
pageX:30
pageY:62
path:(5) [button#myBtn, body, html, document, Window]
relatedTarget:null
returnValue:true
screenX:2377
screenY:320
shiftKey:false
sourceCapabilities:InputDeviceCapabilities {firesTouchEvents: false}
srcElement:button#myBtn
target:button#myBtn
timeStamp:658.445
toElement:button#myBtn
type:"click"
view:Window {frames: Window, postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, …}
which:1
x:30
y:62
__proto__:MouseEvent
通过查看w3c给出的event flow【https://www.w3.org/TR/DOM-Lev...】可以发现,由于事件捕获和事件冒泡的存在,很多时候注册的事件监听者【event.currentTarget】并不是事件的触发者【event.target】,大部分时候事件可能是由子元素触发的,但是在捕获、冒泡的过程中被父级元素的事件监听器获取到了,注册监听事件的父级元素就是这种情况下event.currentTarget,而事件触发者也就是子元素就是event.target;
文字说来总是同步;可以看实例:
菜鸟教程(runoob.com)
该实例使用 addEventListener() 方法在按钮中添加点击事件。