dispatchEvent到所有侦听器 [英] dispatchEvent to all listeners

问题描述

也许这是对我的误解，但我认为当你创建一个自定义事件，然后创建带有事件监听器的元素（监听该事件）时，事件（本身）会跟踪所有的监听器等待事件发生的人以及事件发生时所有听众都会自动得到通知。

Perhaps this is a misconception of mine, but I thought that when you create a custom event, and later create "elements with event listeners" (listening for that event), that the event (itself) keeps track of all the listeners who are waiting for the event to occur and that when the event occurs all listeners are automatically notified.

然而，在我看过的所有例子中，它看起来像是通知过程非常明确（不是很自动）;您必须通过以下方式手动编码将事件分派给每个侦听元素：

However, in all the examples I've seen, it looks like the notification-process is very explicit (not very automatic); you have to manually code the dispatching of the event to each listening element via:

elementName.dispatchEvent(eventName);

例如，我刚刚将此测试代码编写为：

For example, I just wrote this test-code to:

• 创建基本自定义事件


• 使用自定义事件的侦听器生成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的背景颜色变为红色，但是我不知道一个方法（没有创建一个循环）来调度给所有的监听器。

Obviously, I expected the last line of the code above to only make the last div's background color red, but I'm not aware of a method (without creating a loop) to dispatch to all listeners.

然而，在尝试这个实验之前，我假设会有一些事件对象的方法将事件发送给所有订阅的侦听器（并使所有DIV变为红色）。我认为这是addEventListener方法的主要目的：创建事件发生时要通知的所有元素的某种类型的幕后列表。

However, before trying this experiment, I assumed there would be some method of the event object that would dispatch the event to all subscribed listeners (and make all DIVs red). I thought that was the main purpose of the addEventListener method: to create some type of "behind the scenes list" of all the elements to be notified when an event occurs.

您是否真的需要手动调度到正在侦听的每个元素？

Do you really have to manually dispatch to each element that is listening?

推荐答案

将自定义事件分派给特定的侦听器目标对象。无论调度事件的哪个对象或正在侦听哪个对象，都不会向该事件的所有侦听器调度它？它基本上就像点击事件一样有效。事件仅被调度到特定对象，并且只有该事件的侦听器附加到该特定对象。

A custom event is dispatched to the listeners of a specific target object. It is not dispatched to all listeners of that event no matter which object the event is dispatched to or which object is being listened to? It basically works exactly like a 'click' event works. The event is dispatched only to a specific object and only the listeners for that event attached to that specific object.

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

If you want a global event and global listeners like you seem to want, then you can create a single known object, have everyone listen to events on that object and then dispatch the event to that object. Then, everyone will get notified of the event.

您可能会发现更容易使用eventEmitter对象，例如这个。

You may find it easier to just use an eventEmitter object like this.

但是，如果你想做的就是改变一堆<$的一些属性c $ c> div 对象，然后我建议你只在它们上面放一个公共类名并使用 document.querySelectorAll（）来检索所有目标元素然后在它们上运行一些代码。我没有看到自定义事件监听器的任何特殊原因，因为他们没有真正做你正在做的事情。

But, if all you want to do is to change some attribute of a bunch of div objects, then I'd suggest you just put a common class name on them and use document.querySelectorAll() to retrieve all the target elements and then run some code on them. I don't see any particular reason here for custom event listeners as they don't really do what you're doing.

你可以使用这样的东西：

You could use something like this:

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;
});

或者在没有回调函数的情况下设置的版本：

Or a version that works on a style setting without a callback function:

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到所有侦听器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！