DOM中的event
event
Event 接口表示在 DOM 中发生的任何事件; 一些是用户生成的(例如鼠标或键盘事件),而其他由 API 生成(例如指示动画已经完成运行的事件,视频已被暂停等等。事件通常由外部源触发,同样也会以编程方式触发,例如执行一个 element 的一个 HTMLElement.click( ) 方法,或通过定义事件,然后使用 EventTarget.dispatchEvent() 将其派发到一个指定的目标。有许多类型的事件,其中一些使用基于主要事件接口的其他接口。事件本身包含所有事件通用的属性和方法。 事件处理函数可以附加在各种对象上,包括 DOM元素,window,document对象. 等
有三种方式可以为DOM元素注册事件处理函数
- EventTarget.addEventListener
// Assuming myButton is a button element
myButton.addEventListener('click', function(){alert('Hello world');}, false);
- HTML 属性
<button onclick="alert('Hello world!')">
- DOM 元素属性
该函数在定义时,可以传入一个 event 形式的参数。 在HTML 规范中,其返回值会以一种特殊的方式被处理。
// Assuming myButton is a button element
myButton.onclick = function(event){alert('Hello world');};
创建自定义事件
可以使用事件构造函数创建事件
var event = new Event('build');
let eventEle = document.createElement('event')
// Listen for the event.
eventEle.addEventListener('build', function (event) {console.log(event)}, false);
// Dispatch the event.
eventEle.dispatchEvent(event);
为了向事件对象添加更多数据,存在CustomEvent接口,并且可以使用详细信息属性传递自定义数据。CustomEvent接口的detail只读属性返回初始化事件时传递的所有数据 例如,可以如下创建事件:
var event = new CustomEvent('build',{
detail: 'text'
});
let eventEle = document.createElement('event')
// Listen for the event.
eventEle.addEventListener('build', function (event) {console.log(event)}, false);
// Dispatch the event.
eventEle.dispatchEvent(event);