为什么我的自定义事件数据没有传递？

Question

我正在尝试向我的CustomEvent传递附加数据，以便其他项目可以连接并创建基于其中内容的逻辑。这是我的代码：

$(window).on('contentRemoved', (event) => {
  console.log(event.some_data);
});


$('#trigger').on('click', () => {
  const contentRemovedEvent = new CustomEvent('contentRemoved', {
    'some_data': 1
  });
  window.dispatchEvent(contentRemovedEvent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="trigger">Click me</button>

...但它返回未定义。我做错了什么？

- coolpasta

---

为什么不使用trigger()方法？ - Lawrence Cherone

@LawrenceCherone 我不知道我不知道的东西。它做得更好在哪里？此外，它似乎是触发事件，而不是创建事件。 - coolpasta

Answer 1

你需要传递一个具有 detail 键的对象：https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Creating_and_triggering_events#Event_bubbling 引入了 CustomEvent 接口以添加更多数据到事件对象，可以使用 detail 属性来传递自定义数据。

你传递给 CustomEvent 的第二个参数类似于一个 选项 对象，其中可以指定 data 和 bubbles ...，请查看可能属性的列表中的 data 将进入 detail 键。

$(window).on('contentRemoved', (event) => {
  console.log(event.detail);
});


$('#trigger').on('click', () => {
  const contentRemovedEvent = new CustomEvent('contentRemoved', {
    detail : { 'some_data': 1 }
  });
  window.dispatchEvent(contentRemovedEvent);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="trigger">Click me</button>

- Taki

---

啊哈！一个对象...在一个带有特定键的对象内！为什么会这样呢？有什么解释吗？ - coolpasta

@coolpasta 请查看 MDN 文档。 - Paul Rooney

@coolpasta 我写了一点更详细的内容，点击附加的链接查看更多深入详情。 - Taki