javascript - dispatchEvent 给所有的监听器

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 对象的某些属性，那么我建议您只在它们上面放一个通用类名并使用 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");