javascript - 向所有监听器调度事件

Question

也许这是我的误解，但我认为当您创建自定义事件，然后创建“具有事件监听器的元素”(监听该事件)时，该事件(本身)会跟踪所有监听器谁正在等待事件发生，并且当事件发生时，所有监听器都会自动收到通知。

但是，在我见过的所有示例中，通知过程似乎非常明确(不是很自动)；您必须通过以下方式手动编写将事件分派(dispatch)到每个监听元素的代码:

elementName.dispatchEvent(eventName);

例如，我刚刚将此测试代码写入:

• 创建基本自定义事件
• 使用自定义事件的监听器生成 100 个 div 元素
• 使每个div的背景色在事件发生时变为红色 发生了

var myEvent = new CustomEvent("redTime", {});
var div;
for(var i=1, iL=101; i < iL; i++)
{
  div = document.createElement('div');
  document.body.appendChild(div);
  div.innerHTML = i;
  div.style.border = "solid 1px #333333";
  div.style.display = "inline-block";
  div.style.margin = "1px";
  div.style.padding = "1px";
  div.addEventListener("redTime", function(e)
  {
    this.style.backgroundColor = "red";
  });
  document.body.appendChild(div);
}
div.dispatchEvent(myEvent);

显然，我预计上面代码的最后一行只会使最后一个 div 的背景色变为红色，但我不知道有一种方法(不创建循环)可以分派(dispatch)给所有监听器。

但是，在尝试此实验之前，我假设事件对象有某种方法可以将事件分派(dispatch)给所有订阅的监听器(并使所有 DIV 变为红色)。我认为这是 addEventListener 方法的主要目的:创建某种类型的“幕后列表”，其中包含事件发生时要通知的所有元素。

您真的需要手动分派(dispatch)到每个正在监听的元素吗？

Answer 1

自定义事件被分派(dispatch)到特定目标对象的监听器。无论事件被调度到哪个对象或正在监听哪个对象，它都不会被调度到该事件的所有监听器？它的工作原理基本上与“点击”事件完全相同。该事件仅分派(dispatch)到特定对象，并且仅将该事件的监听器附加到该特定对象。

如果您想要一个全局事件和全局监听器，就像您想要的那样，那么您可以创建一个已知对象，让每个人监听该对象上的事件，然后将事件分派(dispatch)给该对象。然后，每个人都会收到该事件的通知。

您可能会发现使用像 this 这样的 eventEmitter 对象更容易.

但是，如果您只想更改一堆 div 对象的某些属性，那么我建议您在它们上放置一个公共(public)类名并使用 document .querySelectorAll() 检索所有目标元素，然后在它们上运行一些代码。我在这里没有看到自定义事件监听器有任何特殊原因，因为它们并没有真正执行您正在执行的操作。

你可以使用这样的东西:

function iterateTargets(selector, fn, data) {
    var items = document.querySelectorAll(selector);
    for (var i = 0; i < items.length; i++) {
        fn(items[i], data);
    }
}

iterateTargets(".specials", function(item){
    item.style.backgroundColor = "red;
});

或者在没有回调函数的情况下使用样式设置的版本:

function iterateTargets(selector, fn, data) {
    var items = document.querySelectorAll(selector);
    for (var i = 0; i < items.length; i++) {
        fn(items[i], data);
    }
}

function setStyles(selector, styleName, value) {
    iterateTargets(selector, function(item) {
        item.style[styleName] = value;
    });
}

setStyles(".specials", "backgroundColor", "red");