dispatchEvent 给所有的监听器

Question

也许这是我的误解，但我认为当您创建一个自定义事件，然后创建 "elements with event listeners"（监听该事件）时，该事件（本身）会跟踪所有等待事件发生的侦听器，当事件发生时所有侦听器都会自动收到通知。

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

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 的背景颜色变为红色，但我不知道要分派到的方法（不创建循环）所有听众。

但是，在尝试这个实验之前，我假设事件对象会有一些方法可以将事件分派给所有订阅的侦听器（并使所有 DIV 变为红色）。我认为这是 addEventListener 方法的主要目的：创建某种类型的 "behind the scenes list" 事件发生时要通知的所有元素。

您真的必须手动分派到正在侦听的每个元素吗？

Answer 1

自定义事件被分派给特定目标对象的侦听器。它不是被派发给那个事件的所有侦听器，无论事件被派发给哪个对象或者正在监听哪个对象？它基本上与 'click' 事件完全一样。该事件仅分派给特定对象，并且仅将该事件的侦听器附加到该特定对象。

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

您可能会发现仅使用像 this.

这样的 eventEmitter 对象会更容易

但是，如果您只想更改一堆 div 对象的某些属性，那么我建议您只在它们上面放一个通用的 class 名称并使用 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");

dispatchEvent 给所有的监听器

dispatchEvent to all listeners

javascript

event-listener

event-handling

dom-events