javascript - JavaScript 如何实现匿名事件传递？

Question

期望的场景:

<小时/>

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

在源文件 BCD.js 中，元素 B、C 和 D(在元素 A 编码时未知)想要订阅/处理/响应/ react 由 A 的 onclick 处理函数触发的自定义事件。

<小时/>

在本例中，从 A 的 Angular 来看 B、C 和 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'));

单击将发出一个事件，并且将调用任何处理程序。因此，在某些其他模块或其他模块中，根据您规定的任何操作，您可以将处理程序绑定(bind)到该事件发射:

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

function doSomething() { ... }

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

JavaScript 开发人员已经想出了很多方法来处理这个问题。