HTML: Dom event
转自:https://developer.mozilla.org/zh-CN/docs/Web/API/Event
Event接口表示在DOM中发生的任何事件; 一些是用户生成的(例如鼠标或键盘事件),而其他由API生成(例如指示动画已经完成运行的事件,视频已被暂停等等)。有许多类型的事件,其中一些使用基于主要事件接口的其他接口。事件本身包含所有事件通用的属性和方法。
本章介绍了 DOM Event 模型。主要包括 Event 接口本身的描述以及在DOM节点上的事件注册, event listeners ,还有说明各种事件接口如何关联的一些较长的例子。
HTML 属性
<button onclick="alert('Hello world!')">
在属性中的JavaScript 代码,是通过 event
参数传入 Event 对象的。 在HTML规范中,其返回值会以一种特殊的方式被处理。
我们应该避免使用这种方式。因为它会使标记数量变大,而可读性却较差。 内容/结构 和 行为之间没有很好的分离,使得在处理bug时非常困难。
DOM 元素属性
1 // Assuming myButton is a button element 2 myButton.onclick = function(event){alert('Hello world');};
该函数在定义时,可以传入一个 event
形式的参数。 在HTML 规范中,其返回值会以一种特殊的方式被处理。
这种方法的问题在于每个元素和事件只能设置一个处理函数。
DOM Event
接口
事件处理函数可以附加在各种对象上,包括 DOM元素,window 对象 等。当事件发生时, event 对象就会被创建并依次传递给事件监听器。
在处理函数中,将event对象作为第一个参数参数,可以访问 DOM Event 接口。下面简单的实例则简单说明了 event对象是如何传入事件处理函数,在函数中是如何被使用的。
1 function foo(evt) { 2 // the evt parameter is automatically assigned the event object 3 alert(evt); 4 } 5 table_el.onclick = foo;
属性
Event.bubbles
- 一个布尔值,用来表示该事件是否在DOM中冒泡。
Event.cancelBubble
Event.stopPropagation()
以前的别名。通过在一个事件处理程序返回前设置这个属性的值为真,来阻止事件冒泡。Event.cancelable
- 一个布尔值,用来表示这个事件是否可以取消。
Event.composed
- 一个布尔值,用来表示这个事件是否可以在阴影DOM和常规DOM之间的边界上浮动。
Event.currentTarget
- 当前注册事件的对象的引用。这是一个这个事件目前需要传递到的对象(译者:大概意思就是注册这个事件监听的对象)。这个值会在传递的途中进行改变。
Event.deepPath
- 一个由事件流经过了的 DOM
Node
组成的Array
Event.defaultPrevented
- 一个布尔值,表示了是否已经执行过了
event.preventDefault()
(译者:其实应该就是是否已经阻止默认行为) Event.eventPhase
- 指示事件流正在处理哪个阶段。
Event.explicitOriginalTarget
只读- 事件的原始目标(Mozilla内核特定属性)。
Event.originalTarget
- 在任何重定向之前,事件的原始目标 (Mozilla内核特定属性)。
Event.returnValue
- 一个非标准的替代方案(从旧版本的Microsoft Internet Explorer)到
Event.preventDefault()
和Event.defaultPrevented
。 Event.scoped
- 一个
Boolean
,表示给定的事件是否会通过阴影进入到标准的DOM中。 此属性已重命名为composed
。 Event.srcElement
- 非标准别名(Microsoft Internet Explorer的旧版本)
Event.target
. Event.target
- 对事件起源目标的引用。
Event.timeStamp
- 事件创建时的时间戳,毫秒级别。按照规定,这个时间戳是距离某个特定时刻的差值,但实际上在浏览器中此处的事件戳的定义有所不同。另外,正在开展工作将其改为
DOMHighResTimeStamp
。(译者注:参考时间戳,在浏览器中此处的时间戳是距离该页面打开时刻的大小)。 Event.type
- 事件的类型(不区分大小写)。
Event.isTrusted
- 指明事件是否是由浏览器(当用户点击实例后)或者由脚本(使用事件的创建方法,例如event.initEvent)启动。
方法
event.initEvent
- 通过
DocumentEvent的接口给被创建的事件初始化某些值。
event.preventBubble
已废弃 Gecko 24- 防止事件冒泡。已弃用,请使用
event.stopPropagation
代替它。 event.preventDefault
- 取消事件(如果该事件可取消)。
event.stopImmediatePropagation
- 对这个特定的事件而言,没有其他监听器被调用。这个事件既不会添加到相同的元素上,也不会添加到以后将要遍历的元素上(例如在捕获阶段)。
event.stopPropagation
- 停止事件冒泡。
Event.getPreventDefault()
- 未标准化,返回
Event.defaultPrevented
的值。用Event.defaultPrevented
代替。