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

2024-04-07

In this MDN 中的 .addEventListener https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener

listener

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

它说我们可以使用an object that implements the Event interface作为事件的监听者。

但我找不到对象如何实现 Event 接口。正如我尝试过的:

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>

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

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


At DOM https://dom.spec.whatwg.org/

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

描述于IDL指数 https://dom.spec.whatwg.org/#idl-index,链接到3.6.接口事件目标 https://dom.spec.whatwg.org/#interface-eventtarget,再次提到3.8.调度事件 https://dom.spec.whatwg.org/#dispatching-events

To 内部调用 https://dom.spec.whatwg.org/#concept-event-listener-inner-invoke一个带有事件的对象,运行以下步骤:致电 用户对象的操作 https://heycam.github.io/webidl/#call-a-user-objects-operation通过监听器的回调,“handleEvent“, A 由事件和事件的 currentTarget 组成的参数列表 属性值作为回调this值。如果这引发了 异常,报告异常。

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

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

  • type(一个字符串)
  • callback(事件监听器)
  • capture(布尔值,最初为 false)
  • passive(布尔值,最初为 false)
  • once(布尔值,最初为 false)
  • removed(用于簿记目的的布尔值,最初为 false)

虽然回调是一个事件监听器 https://dom.spec.whatwg.org/#callbackdef-eventlistener,从 在上面的字段中,事件监听器是一个更广泛的概念。

其中引用回EventListener对象在哪里handleEvent是唯一命名的属性。

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

Web IDL https://heycam.github.io/webidl澄清

2.2.接口 https://heycam.github.io/webidl/#idl-interfaces

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

callback interface https://heycam.github.io/webidl

回调接口是使用callback关键字的接口 其定义的开始。回调接口是可以 实施者用户对象 https://heycam.github.io/webidl/#idl-objects而不是通过平台对象,如 §2.10 对象实现接口中描述。

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

2.10.实现接口的对象 https://heycam.github.io/webidl/#idl-objects

用户对象 https://heycam.github.io/webidl/#dfn-user-object是作者将创建、实施的那些 Web API 用于调用的回调接口 作者定义的操作或发送和接收值到 作者通过操纵对象的属性来编写程序。在一个 网页,一个实现 EventListener 的 ECMAScript 对象 接口,用于注册 DOM 事件的回调 实现调用,将被视为用户对象。

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

例如

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

不将事件分派给abc处理程序。尽管handleEvent标识符确实调度事件。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript 中的对象如何实现 Event 接口 的相关文章

随机推荐

  • 独立验证表单片段

    我有一个非常大的表格 我以类似向导的方式将其分成四个部分 向导插件 智能向导 具有当前处于焦点的表单段 而其余 3 个段隐藏在 dom 中 我正在使用 jquery 验证插件来动态验证表单 问题是验证所显示的表单部分 仅当用户进入下一步时
  • 在 Eclipse 中找不到 run as junit test

    我在 Eclipse 中创建了一个这样的测试类 RunWith SpringJUnit4ClassRunner class ContextConfiguration locations classpath applicationContex
  • 初学者:Scala 2.10 中的 Scala 类型别名?

    为什么此代码无法编译并出现错误 未找到 值矩阵 从文档和一些 可能已经过时的 代码示例来看 这应该可行吗 object TestMatrix extends App type Row List Int type Matrix List Ro
  • 模板参数推导:哪个编译器在这里?

    考虑以下代码 template
  • 为什么 helm 不使用部署模板中定义的名称?

    即来自name Chart Name Values module5678 name pod below deployment yaml apiVersion apps v1 kind Deployment metadata labels a
  • 在启动时注册多个 DbContext 实例以在通用存储库中使用

    我正在尝试创建一个通用存储库 它接受 2 个通用类型 例如 public class EfRepository
  • 在 Azure 上部署 MEAN+Webpack

    如何部署 MEAN STACK WEBPAC 应用程序 我有一个 MEAN Stack Webpac 应用程序和 nodejs 服务器 提供其余api 我使用 webpack 开发服务器运行 Angular 应用程序 构建 webpack
  • QMessageBox::ritic 不显示标题文本

    我需要显示简单的错误消息 QMessageBox critical nullptr My Title Text 但出现的对话框的标题为空 我做错了什么 PS 操作系统 MacOS 10 9 1 你没有做错什么 从QMessageBox se
  • Silverlight 应用程序中的跨线程访问无效

    我正在使用 Hammock 框架从 Silverlight 应用程序到 Rest 服务进行异步服务调用 在 完成 回调中 我正在更新绑定到视图上组合框的 ObservableCollection OnPropertyChanged 事件处理
  • Spring AMQP RabbitMQ 如何直接发送到Queue而不需要Exchange

    我正在使用 Spring AMQP 和 Rabbitmq 模板 如何直接将消息发送到队列而不使用Exchange 我该怎么做 我该怎么做 你不能 发布者不知道队列 只是交换和路由密钥 但是 所有队列都绑定到默认交换器 以队列名称作为其路由键
  • 将列名称文本包装在 R 中的 ggpairs 中

    我正在使用 ggpairs 在绘制矩阵时 我收到一个矩阵 如下所示 正如您所看到的 某些文本长度很大 因此文本看不完整 无论如何 我可以将文本换行 使其完全可见吗 Code ggpairs df 我希望文本换行 以便可以看到类似这样的内容
  • 如何在 Angular 6 中设置日期格式?

    我有一个功能 可以显示用户输入的实时日期 现在当用户输入输入时 我在前端显示 日期 28 10 2018 10 09 我希望更改日期 如果是过去几天 过去一周 过去一年等 因此 如果昨天输入了输入 我想显示如下内容 1d意思是一天前 一年也
  • 使用heroku上传文件

    据我所理解heroku http heroku com不允许存储单个 Rails 应用程序的上传文件 在他们的文档中 他们提到文件可以上传到亚马逊S3 http aws amazon com s3 实例 我目前没有 S3 帐户 因此假设我只
  • 使用 CLI 通过 docker-compose 部署到 Azure 时,访问代理页面时超时

    I have docker compose file version 3 services app2 image kamilwit dockerdocker app2 container name app2 build context ap
  • 设置标题和 v7 抽屉切换之间的间距

    我现在正在使用 v7 支持库的 ActionBarDrawerToggle 但抽屉图标直接位于标题字体处 因为我禁用了 showHomeEnabled 如何在标题和切换开关之间设置更多可用空间 Thanks 事实上 遗憾的是这并不能真正实现
  • Java中的并发排序

    我目前正在开发一个同时对字符串进行排序的程序 我的程序接收一个文件 将文件的每一行读入一个数组 并将字符串数组拆分为更小的字符串数组 然后 程序为每个较小的数组启动一个线程 并对它们进行快速排序 一旦每个线程完成对其数组的排序 主线程就会从
  • C# 和 WCF 中具有存储库模式的 Web 服务?

    任何人都可以确认将存储库模式与 Web 服务集成的最佳方法吗 实际上我的存储库模式现在在 C 中工作 我有 3 个项目 DataAccess Services 和我的表示层 问题是我的表示层有很多东西 我有一个 ASP NET MVC 站点
  • Nginx 上传进度模块与 Rails 和 Passenger

    我一直在尝试使用 Rails 和 Passenger 在 WebFaction 上运行 Nginx 上传进度模块 使用 Paperclip 上传到 S3 到目前为止 我得出的最好结果是它报告开始和结束 但没有报告中间的情况 对 progre
  • 使用正则表达式提取 URL

    我已经搜索了至少 2 小时 但找不到任何使用正则表达式提取以下 URL 的模式 我采用了很多文章中描述的太多模式 但我找不到有用的东西 例如 URL 类似于以下模式 http google com http www google com h
  • JavaScript 中的对象如何实现 Event 接口

    In this MDN 中的 addEventListener https developer mozilla org en US docs Web API EventTarget addEventListener listener 当指定