Question

期望的场景：

在源文件A.html中，元素A的onclick处理程序被编码为每次单击A时触发自定义事件。

在源文件BCD.js元素B，C＆amp; D（在编码元素A时未知）想要订阅/处理/响应/响应由A的onclick处理函数触发的自定义事件。

在这种情况下，从A的角度来看，C＆amp; D是自定义事件的匿名接收者。

Answer 1

您可以执行某种pubsub实现。

var events = {};

var pubsub = {
    on: function(event, handler) {
        if(event in events) {
            events[event].push(handler);
        } else {
            events[event] = [handler];
        }
    },
    emit: function(event) {
        if(event in events) {
            events[event].forEach(function(handler) {
                handler.call(null, event);
            });
        }
    }
};

这种实现将自定义事件与全局对象联系起来，因此元素不必像你提到的那样“了解”彼此。你实现上述方法的方式如下：

document.getElementById('some-element').addEventListener('click', pubsub.emit.bind(null, 'custom-event'));

点击将发出一个事件，并且将调用任何处理程序。因此，在某些其他模块中，或者根据您规定的任何操作，您可以将处理程序与该事件发射联系起来：

pubsub.on('custom-event', doSomething);

function doSomething() { ... }

我认为这是一种非常正常的，与语言无关的全局事件处理实现。

JavaScript开发人员已经找到了很多方法来解决这个问题。

Answer 2

首先，区分DOM事件和一般编程中事件/ pubsub的概念以及常见的javascript模式非常重要。

DOM事件是浏览器api告诉你的javascript代码发生了什么事。他们也是 asyc

您正在谈论的自定义事件是您的javascript代码中的通信方式，也称为“事件” 这是这种模式的基本实现 http://davidwalsh.name/pubsub-javascript 在下划线代码中，它是一个简单的 sync 函数调用

还有一件事：
从技术上讲，您可以使用自定义名称触发DOM事件，并使用它来在您的javascript代码的不同部分之间进行通信。我会再次建议。这也将使通信异步

如何使用JavaScript实现匿名事件传递？

2 个答案: