具有不同触发元素和侦听器元素的自定义事件

Question

 var event = new CustomEvent("custom-event", {bubbles:true, detail:"something"}); var eleA = document.getElementById("A"); var eleB = document.getElementById("B"); eleB.addEventListener("custom-event", function(e) { console.log("custom-event caught in element B", e.detail); }); document.addEventListener("custom-event", function(e) { console.log("custom-event caught in document", e.detail); }); eleA.dispatchEvent(event);

 <html> <body> <div id="A">A</div> <div id="B">B</div> </body> </html>

我搜索了过去的问题，但找不到答案。 我有一个元素 A 触发自定义事件，并希望另一个元素 B 接收事件并对其采取行动。 例如：

var event = new CustomEvent("new-event");
var eleA = document.querySelector("#A");
eleA.dispatchEvent(event);

//...
// somewhere else
...
var eleB = document.querySelector("#B");
eleB.addEventListener("new-event", function(e) {
   console.log('heard');
});

我发现事件没有被触发。 我尝试添加：

var event = new CustomEvent("new-event", {bubbles:true});

但没有区别，但是，如果我将侦听器更改为如下所示，它会起作用：

document.addEventListener("new-event", function(e) {
   console.log('heard in document');
});

是不是因为一些传播问题？ 难道没有一种方法我只能在一个或多个特定元素中聆听它吗？

Answer 1

您混淆了dispatchEvent函数的使用。

`.dispatchEvent()`

在指定的 EventTarget 分派一个事件，以适当的顺序调用受影响的 EventListeners。 正常的事件处理规则（包括捕获和可选的冒泡阶段）也适用于使用 dispatchEvent() 手动调度的事件。

自定义事件被分派到特定目标对象的侦听器。 无论事件被分派到哪个对象或正在侦听哪个对象，它都不会被分派给该事件的所有侦听器？ 它的工作原理与“点击”事件的工作原理完全一样。 该事件仅分派给特定对象，并且仅将该事件的侦听器分派到该特定对象。 参考

事件将使用元素的上下文进行调度，并且每个侦听该特定事件的元素都将收到通知。 所以，你没有附加

将通过addEventListener()函数中使用的回调接收通知。

此代码片段显示 elementA、elementB 和 document 如何侦听同一个new-event事件：

 var event = new CustomEvent("new-event"); var eleA = document.querySelector("#A"); eleA.addEventListener("new-event", function(e) { console.log('new-event from Element A'); }); eleA.dispatchEvent(event); var eleB = document.querySelector("#B"); eleB.addEventListener("new-event", function(e) { console.log('new-event from Element B'); }); eleB.dispatchEvent(event); document.addEventListener("new-event", function(e) { console.log('heard in document'); }); document.dispatchEvent(event);

 <span id='A'></span> <span id='B'></span>

此代码片段显示了元素如何侦听它们自己的事件：

 var event = new CustomEvent("new-event"); var eleA = document.querySelector("#A"); eleA.addEventListener("new-event", function(e) { console.log('new-event from Element A'); }); var eventB = new CustomEvent("new-eventB"); var eleB = document.querySelector("#B"); eleB.addEventListener("new-eventB", function(e) { console.log('new-event from Element B'); }); var eventDoc = new CustomEvent("new-eventDoc"); document.addEventListener("new-eventDoc", function(e) { console.log('heard in document'); }); eleA.dispatchEvent(event); eleB.dispatchEvent(eventB); document.dispatchEvent(eventDoc);

 <span id='A'></span> <span id='B'></span>

您可以创建一个SharedResource对象来将事件通知给特定的接收者。

此代码片段向您展示了如何：

eleA通知eleB并document 。
eleC通知eleB 。

 //This Object represents a shared result among receivers. var SharedResource = function(event) { this.event = event; this.receivers = []; this.addReceiver = function(receiver) { this.receivers.push(receiver); } this.addReceivers = function(receivers) { this.receivers.push.apply(this.receivers, receivers); } //This function will loop over receivers array to call the current event. this.notify = function() { var $self = this; this.receivers.forEach(function(receiver) { receiver.dispatchEvent(new CustomEvent($self.event)); }); } }; //Element A will send a "broadcast" message to eleB and Document. var eleA = document.querySelector("#A"); eleA.addEventListener("click", function(e) { ABDocSharedResource.notify(); }); var eleB = document.querySelector("#B"); eleB.addEventListener("new-event", function(e) { console.log('new-event from Element B'); }); document.addEventListener("new-event", function(e) { console.log('new-event from Document'); }); var ABDocSharedResource = new SharedResource('new-event'); ABDocSharedResource.addReceivers([eleB, document]); //Element C will send a "broadcast" message to eleB. var CBSharedResource = new SharedResource('new-event'); CBSharedResource.addReceiver(eleB); var eleC = document.querySelector("#C"); eleC.addEventListener("click", function(e) { CBSharedResource.notify(); });

 <a href="#" id='A'>Click me! (A) - Broadcast to B and Document</a> <br> <a href="#" id='C'>Click me! (C) - Broadcast to B</a> <span id='B'></span>

具有不同触发元素和侦听器元素的自定义事件

问题描述

1 个解决方案

解决方案1
3 已采纳 2018-01-31 10:46:22

`.dispatchEvent()`

具有不同触发元素和侦听器元素的自定义事件

问题描述

1 个解决方案

解决方案1 3 已采纳 2018-01-31 10:46:22

.dispatchEvent()

解决方案1
3 已采纳 2018-01-31 10:46:22

`.dispatchEvent()`