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!')"></button>
  • 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);