带数据的调度事件答案

【问题标题】：Dispatch event with data带数据的调度事件
【发布时间】：2014-05-18 19:10:21
【问题描述】：

我想分派一个事件，它将一些数据传递给任何侦听该事件的事件侦听器。

考虑一个触发事件的函数：

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

click()

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

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

【问题讨论】：

标签： javascript events custom-events

【解决方案1】：

也许你正在寻找event.detail

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

使用 x 而不是数据，在事件侦听器中，您可以使用 event.detail 访问 x

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

【讨论】：

@NicholasKyriakides 是否在所有浏览器中都会发生这种情况，请您使用我的建议更新您的代码或创建一个小提琴
@NicholasKyriakides 在我更新的代码中会显示什么警报。
@NicholasKyriakides 检查我的多个变量的更新答案
我认为您忘记了 } 的详细信息，但除此之外，它就像一个魅力。再次感谢

【解决方案2】：

很遗憾CustomEvent 在 IE（Edge 之前）上不起作用，但您可以简单地使用普通的Event。

只需考虑 Event 也是一个对象，因此您可以添加所有需要的自定义属性：

 event.X = "foo";

通过这种方式，您可以在连接到事件的回调函数上检查您的自定义字段。

注意。对于旧的 IE 版本，你需要这个 polyfill 来处理 new Event 错过的功能：

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

【讨论】：