javascript - 在 Chrome 扩展程序中创建自定义事件的最惯用方法

标签 javascript google-chrome google-chrome-extension

创建非 DOM 相关的自定义事件(使用经典的 chrome.Event 接口(interface))并手动存储并触发它的最惯用的方法是什么?

我的程序中有一个对象 obj,我想在该对象上创建一些事件对象,例如 obj.event1obj.event2,这样:

obj.event1.addListener(callback);
obj.event2.removeListener(callback);
...

是有效的调用。

我知道自己实现它相当容易,但我想知道是否有更好的方法。谢谢。

个人研究:

  • DOM events :为 document 对象创建并从 chrome.events 对象创建
  • ojit_code :显示界面,但不解释如何创建自定义事件
  • Chrome events:它确实展示了如何向现有事件添加规则,但不展示如何创建您自己的自定义事件。

最佳答案

chrome.Event不能用于自定义事件。

要在没有库的情况下触发自定义事件,可以使用标准 DOM 事件,如下所示:

var listener = function(evt) {
    console.log(evt.detail);
};

var target = document.createElement('a'); // Anything that implements EventTarget
target.addEventListener('myEvent', listener);
target.dispatchEvent(new CustomEvent('myEvent', {
    detail: 'test',
}));

如您所见,无需在 document 上注册所有事件,很可能使用任何实现 EventTarget interface 的对象。 .

关于javascript - 在 Chrome 扩展程序中创建自定义事件的最惯用方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36907760/

相关文章:

javascript - 压缩 JS 文件时出现有趣的错误 - 尝试将文件夹读取为 JS 文件

javascript - 选择 INPUT=TEXT 中的所有文本

android - Android 上的 Chrome 是否支持使用 Webauthn/FIDO2 对安全 key 进行用户验证?

javascript - 跨源读取阻止 (CORB) API 调用 Chrome 扩展

google-chrome-extension - 如何获得访问我自己的扩展资源(特定页面)的权限?

javascript - 谷歌浏览器 : Refused to Execute Inline script

javascript - Vue.js 输入值不反射(reflect)组件数据中的值

javascript - IE10 重置 block 的滚动条(位置为左上角)(溢出 :auto) after {display:none, display:block} 序列

javascript - Chrome 正在阻止特定域的 console.log 消息

css - Material 设计图标垂直对齐, Chrome