Javascript 发送带有数据的事件

我想调度一个事件，该事件将向侦听该事件的任何事件侦听器传递一些数据

考虑触发事件的函数：

function click() {
  const x = 'foo'
  document.dispatchEvent(new CustomEvent('clicked'))
}

click()

如何将自定义数据传递给事件侦听器

document.addEventListener('clicked', function(e) {
  console.log(x) // logs "foo"
})

---

可能您正在查找

事件详细信息

new CustomEvent('eventName', {'detail': data})

您可以使用event.detail访问x，而不是使用x和in-event listener来访问数据

function getSelectionBounds() {
  var x = (bounds["x"].toFixed(2));
  var y = "xyz";
  var selectionFired = new CustomEvent("selectionFired", {
    "detail": {"x":x,"y":y }
  });

  document.dispatchEvent(selectionFired);
};

document.addEventListener("selectionFired", function (e) {
  alert(e.detail.x+"   "+e.detail.y);
});

---

不幸的是，

CustomEvent

无法在IE上工作（在Edge之前），但您只需使用普通的

事件即可

只需考虑<代码>事件是一个对象，因此您可以添加您需要的所有自定义属性：
 event.X = "foo";

通过这种方式，您可以检查与事件相关的回调函数上的自定义字段



注意。对于旧IE版本，您需要此polyfill用于
新事件
错过的功能：

var event;
if(typeof(Event) === 'function') {
  event = new Event(EVENT_NAME);
}else{
  event = document.createEvent('Event');
  event.initEvent(EVENT_NAME, false, false);
}

@NicholasKyriakides这在所有浏览器中都会发生吗？请使用我的建议更新您的代码，或者创建一个fiddle@NicholasKyriakides“警报在我更新的代码中显示了什么。@NicholasKyriakides检查我更新的答案中的多个变量我认为你详细忘记了a}，但除此之外，它就像一个符咒。再次感谢