javascript - 带数据的调度事件

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

代替数据使用 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);
});

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