Javascript:使用自定义参数声明自定义事件

Question

我正在编写一个 Javascript Web 应用程序，我想在按下 Controller 按钮时发送自定义事件。该事件应具有自定义参数:event.index、event.player2 和 event.button。然而，它们都没有在结果事件中定义。这是我到目前为止尝试过的:

我首先声明该事件如下:

var testEvent = new Event('controllerPress', {
  index: 0,
  player2: false,
  button: 12
});

之后不起作用，我在网上查找了一些问答(例如 this )，并重新声明了该事件......

var testEvent = new Event('controllerPress', {
  detail: {
    index: 0,
    player2: false,
    button: 12
  }
});

...但无济于事。我再次查看并更改声明以使用 CustomEvent...

var testEvent = new CustomEvent('controllerPress', {
  detail: {
    index: 0,
    player2: false,
    button: 12
  }
});

...但是 testEvent.index 仍未定义。我错过了什么？

编辑:这不是 “Create JavaScript custom event” 的重复，因为它询问如何创建自定义事件，但它询问如何向该自定义事件添加自定义属性。

Answer 1

显然，没有办法做到这一点。JS 提供的最佳解决方法是:

var event = new CustomEvent('PutYourEventNameHere', {
  detail: { // filled with sample values
    index: 0,
    player2: false,
    button: 1
  }
});

但这不会按照您的预期设置属性。

event.index
>>> undefined
event.player2
>>> undefined
event.button
>>> undefined

您对 CustomEvent 所能做的就是设置参数detail，从而导致这种行为:

event.detail.index
>>> 0
event.detail.player2
>>> false
event.detail.button
>>> 1

结论:如果您要创建自定义事件，则只能定义详细信息。但您可以将 detail 定义为 object 来添加多个自定义属性。虽然很丑，但这就是我们所拥有的。