带数据的调度事件

Question

我想发送一个事件,将一些数据传递给监听该事件的任何事件监听器.

考虑触发事件的函数:

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

click()

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

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

Answer 1

也许你在找 event.detail

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

您可以使用event.detail访问x,而不是使用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);
});

Answer 2

不幸的是，CustomEvent在IE（Edge之前）上不起作用，但是您可以简单地使用normal 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);
}