通过事件监听器监听的多个组件

Question

我想知道为什么不允许在单个节点上有多个类似的 eventListener？我想象这样一种情况，我有多个相同类型的部分，它们使用单个节点通过 CustomEvents 相互通信。但这似乎不起作用，因为它们都共享相同的 EventListener，因此只有其中一个能够侦听和处理事件。

这是为什么？

谢谢！

编辑：小代码片段：

我有

node.addEventListener("customEvent", this.func, false);

和

node.addEventListener("customEvent", this.func, false);

在两个不同的地方和 this.func 指向相同的功能，但在不同的上下文中，最终会触发不同的事情。但是第二个监听器永远不会被调用，因为出于某种原因，这似乎假设它们相同，可能是因为签名相似或其他原因。

EDIT2：我基本上指的是这个。 https://developer.mozilla.org/en-US/docs/Web/API/EventTarget.addEventListener#Multiple_identical_event_listeners

Answer 1

在Java中您可以添加多个侦听器。但是，老实说，我不喜欢这种方法。在大多数情况下，您只需要触发 1 个 interface/object（您正在为只使用一个的多个接口添加开销逻辑）。

我更喜欢 Android 方法：setOn....Event（看起来 JS 就是这样）而不是 Java.

的 addActionListener(...)

当您需要多个触发器时，您可以像这样覆盖：

 obj.setOnEvent(function() {
    doTheOtherEventTrigger();
    doOneMoreEventTrigger();
    ...
 }

Answer 2

您可以使用 addEventListener 将多个类似的事件处理程序附加到一个节点。

node.addEventListener("click", function(){alert(1)}, false);
node.addEventListener("click", function(){alert(2)}, false);

应该提醒两次。当您分配匿名函数时，这有效。

但是，您可以使用绑定分配多个引用相同函数和事件的侦听器。

var a = this.func.bind();
document.getElementById("start").addEventListener("click", a, false);   
var b = this.func.bind();
document.getElementById("start").addEventListener("click", b, false);

这将提醒两次。由于函数包装器不同，它被视为一个独特的事件。

您不能通过 node.onclick 两次分配事件处理程序，因为它是属性。当您分配它两次时，它只会覆盖第一个处理程序。事件侦听器就是为了解决这个问题而发明的。

通过事件监听器监听的多个组件

Multiple Components listening via eventlistener

javascript

events

listener