摘要:有的时候注册事件的监听者并不是事件的触发者,实际事件的触发者是,事件目标是一个由可以接收事件的对象实现的接口,并且可以为它们创建侦听器。中删除事件侦听器。将事件分派到此。事件本身包含所有事件通用的属性和方法。
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() 方法在按钮中添加点击事件。