DOM中的event

编辑
web

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);