javascript - 将事件监听器添加到窗口的子对象

标签 javascript typescript

是否可以将事件添加到窗口上的子对象,该子对象将接受来自任何地方(如窗口)的事件?

例如:

window.myVariable.addEventListener('keydown', doKeyDown);

这样我就可以删除这个特定的按键事件,而无需删除附加到窗口的其他按键事件。

这样的事情是如何完成的?

最佳答案

您可以创建一个在“命名空间”上运行的简单注册表。

(function() {

  var register = {};

  function addNamedListener(namespace, eventType, callback) {
    register[namespace] = register[namespace] || [];
    register[namespace].push({
      eventType: eventType,
      callback: callback
    });

    window.addEventListener(eventType, callback);
  }

  function removeNamedListener(namespace) {
    register[namespace].forEach(function(event) {
      window.removeEventListener(event.eventType, event.callback);
    });
  }

  window.WindowEvents = {
    addNamedListener: addNamedListener,
    removeNamedListener: removeNamedListener
  }

})();

// Attach a general window event to the actual window
window.addEventListener('click', function(e) {
  console.log(e.target);
});

// Attach a namedspaced event
WindowEvents.addNamedListener('windowClicks', 'click', function(e) {
  console.log(e.target);
});

// Attach another event to the same namespace
WindowEvents.addNamedListener('windowClicks', 'click', function(e) {
  console.log(e.clientX);
});

// Attach a new event to a different namespace
WindowEvents.addNamedListener('down', 'mousedown', function(e) {
  console.log('Mouse down occurred');
});
<div>Click Me</div>

然后,当您准备好摆脱该“命名空间”中的事件时,您只需执行以下操作:

WindowEvents.removeNamedListener('windowClicks');

这将保留原始窗口事件以及创建的其他命名空间事件 (down)。

这至少应该让您开始。

关于javascript - 将事件监听器添加到窗口的子对象,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39254635/

相关文章:

javascript - JS/TS必须使用bind但仍需要原来的this

typescript - 如何在 typescript 中为类使用单独的文件?

javascript - 单击预览按钮后,如何在我的 React App 上显示第二个和第三个按钮?

javascript - 有什么方法可以自动加载 webpack 外部文件吗?

JavaScript 图遍历库

javascript - Typescript - 无法拼接数组

typescript - 允许多个不同形状的接口(interface)作为 TypeScript 返回类型

javascript - NodeJS 异步函数不起作用

javascript - 文本框为空时隐藏元素

typescript - Typescript 中的方括号与表达式后的关系