文章/答案/技术大牛

发布

社区首页 >问答首页 >具有不同触发器元素和侦听器元素的自定义事件

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

Stack Overflow用户

提问于 2018-01-31 10:22:14

回答 1查看 1.5K关注 0票数 2

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

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

javascript

dom-events

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-01-31 10:46:22

您混淆了dispatchEvent函数的使用。

.dispatchEvent()

在指定的EventTarget处分派一个事件，以适当的顺序调用受影响的EventListeners。正常的事件处理规则(包括捕获和可选冒泡阶段)也适用于用dispatchEvent()手动分派的事件。
自定义事件被分派给特定目标对象的侦听器。它不被分派给事件的所有侦听器，不管事件被发送给哪个对象或正在侦听哪个对象？它基本上就像“点击”事件一样工作。事件只被分派到特定的对象，并且只有附加到该特定对象的事件的侦听器。Reference

事件将使用元素的上下文发送，侦听该特定事件的每个元素都将收到通知。所以，你不能

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

这个代码片段显示了new-event、elementB和document是如何监听相同的事件：的。

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>

票数 3

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/48539768

复制

相似问题

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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