对象如何在 JavaScript 中实现 Event 接口

Tom*_*ion 5 javascript addeventlistener dom-events

MDN 中的这个.addEventListener 中

听众

当指定类型的事件发生时接收通知的对象(实现 Event 接口的对象)。这必须是一个实现 EventListener 接口的对象,或者只是一个 JavaScript 函数。

它说我们可以an object that implements the Event interface用作事件的侦听器。

但我找不到如何反对实现 Event 接口。正如我尝试的那样:

document.querySelector('#demo').addEventListener('click', {
  handleEvent: function (e) {
    console.log(e)
  }
}, false)
Run Code Online (Sandbox Code Playgroud)
#demo {
  height: 200px;
  background: #ccc;
}
Run Code Online (Sandbox Code Playgroud)
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<div id="demo"></div>
</body>
</html>
Run Code Online (Sandbox Code Playgroud)

这个可以正确处理点击事件。

也许你可以给我一些关于这方面的文件。

gue*_*314 5

DOM

callback interface EventListener {
  void handleEvent(Event event);
};
Run Code Online (Sandbox Code Playgroud)

IDL Index 中有描述,它链接到3.6。接口 EventTarget,在3.8再次提到。调度事件

要使用事件内部调用对象,请运行以下步骤:使用侦听器的回调、“ ”、由事件组成的参数列表以及作为回调 this 值的事件的 currentTarget 属性值调用用户对象的操作handleEvent。如果这引发异常,则报告异常。

事件侦听器可用于观察特定事件。

事件侦听器由以下字段组成:

  • 类型(字符串)
  • 回调(一个事件监听器)
  • 捕获(一个布尔值,最初为假)
  • 被动(布尔值,最初为假)
  • 一次(一个布尔值,最初为假)
  • 已删除(用于簿记目的的布尔值,最初为 false)

虽然回调是一个EventListener,从上面的字段可以看出,事件监听器是一个更广泛的概念。

它引用回唯一命名属性的EventListener对象handleEvent

callback interface EventListener {
  void handleEvent(Event event);
}
Run Code Online (Sandbox Code Playgroud)

Web IDL阐明

2.2. 接口

EventListener作为回调接口的定义是现有 API 的一个示例,该 API 需要允许具有给定属性(在本例中为“ handleEvent”)的用户对象被视为实现该接口。对于新的 API,以及那些没有兼容性问题的 API,使用回调函数将只允许一个 Function 对象(在 ECMAScript 语言绑定中)。

callback interface

回调接口是在定义开始时使用 callback 关键字的接口。回调接口是可以由用户对象而不是平台对象实现的接口,如§2.10 对象实现接口中所述。

    callback interface identifier {
      /* interface_members... */
    };
Run Code Online (Sandbox Code Playgroud)

2.10. 实现接口的对象

用户对象是作者创建的对象,实现回调接口,Web API 使用这些接口能够调用作者定义的操作或通过操纵对象的属性向作者的程序发送和接收值。在网页中,实现 EventListener 接口的 ECMAScript 对象将被视为用户对象,该接口用于注册 DOM 事件实现调用的回调。

注意用户对象只能实现回调接口,平台对象只能实现非回调接口。

例如

document.querySelector('#demo').addEventListener('click', {
  abc: function (e) {
    console.log(e)
  }
}, false)
Run Code Online (Sandbox Code Playgroud)

不向abc处理程序分派事件。虽然handleEvent标识符确实调度事件。