繁体   English   中英

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

[英]How can an object implements the Event interface in JavaScript

在此MDN中的.addEventListener中

倾听者

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

它表示我们可以使用an object that implements the Event interface作为an object that implements the Event interface侦听器。

但是我找不到如何实现事件接口的对象。 当我尝试:

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

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

也许您可以给我一些有关此的文件。

DOM

callback interface EventListener {
  void handleEvent(Event event);
};

IDL索引中进行了描述,该索引链接到3.6。 接口EventTarget ,在3.8再次提到 调度事件

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

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

事件侦听器包含以下字段:

  • 类型 (字符串)
  • 回调 (一个EventListener)
  • 捕获 (布尔值,最初为false)
  • 被动的 (布尔值,最初为false)
  • 一次 (布尔值,最初为false)
  • 移除 (用于簿记目的的布尔值,最初为false)

尽管回调是EventListener ,如从上面的字段中可以看到的,但事件侦听器是一个更广泛的概念。

它引用回EventListener对象,其中handleEvent是唯一的命名属性。

callback interface EventListener {
  void handleEvent(Event event);
}

Web IDL阐明

2.2。 接口

EventListener定义为回调接口是现有API的示例,该API需要允许考虑具有给定属性的用户对象(在这种情况下为“ handleEvent ”)来实现该接口。 对于新的API,以及不存在兼容性问题的API,使用回调函数将仅允许使用Function对象(在ECMAScript语言绑定中)。

callback interface

回调接口是在其定义的开头使用callback关键字的接口。 回调接口是可以由用户对象而非平台对象实现的接口,如第2.10节“实现接口的对象”中所述。

  callback interface identifier { /* interface_members... */ }; 

2.10。 对象实现接口

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

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

例如

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

不会将事件调度到abc处理程序。 虽然handleEvent标识符确实调度事件。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM