用自定义事件在JS中轻松传参，让代码更灵活更有趣

2023-11-17 11:11:10

自定义事件：JavaScript传递参数的秘籍

在 JavaScript 的世界里，自定义事件如同魔法，赋予我们创建特定事件并传递必要数据的超能力。通过 CustomEvent 类，我们可以让事件携带附加信息，打造出强大且灵活的 Web 应用程序。

构建自定义事件：一砖一瓦的搭建

踏上构建自定义事件的旅程，你需要抓住两个基石：事件类型和事件初始化选项。事件类型就是一个字符串，赋予事件独一无二的标识符。初始化选项则像乐高积木，允许我们定制事件的属性，例如是否可冒泡或可取消。

const myEvent = new CustomEvent('my-event', {
  bubbles: true,
  cancelable: true,
  detail: {
    message: '嗨，世界！'
  }
});

派发事件：释放魔法

拥有了定制好的事件，就该让它闪亮登场了！使用 dispatchEvent 方法，我们将事件传送到目标元素，仿佛一封信找到了收件人。

element.dispatchEvent(myEvent);

聆听事件：竖起耳朵

要让事件发挥作用，必须有人来聆听它的到来。addEventListener 方法就是耳朵，它负责监听特定类型的事件，并调用指定的处理函数，就像专人接听来电。

element.addEventListener('my-event', (event) => {
  console.log(event.detail.message);
});

参数传递：在事件中悄声细语

现在，让我们来揭开参数传递的秘密。关键就在于 detail 属性。在创建自定义事件时，将你要传递的数据封装在 detail 中，就像传递一封私密信。

const myEvent = new CustomEvent('my-event', {
  bubbles: true,
  cancelable: true,
  detail: {
    message: '嗨，世界！',
    data: {
      name: '约翰·史密斯',
      age: 30
    }
  }
});

在事件处理程序中获取参数：打开私密信

在事件处理程序中，我们就能打开这封私密信，获取传递的参数了。event.detail.message 就像信封里的信息，让你知晓事件的意图。

element.addEventListener('my-event', (event) => {
  console.log(event.detail.message);
  console.log(event.detail.data.name);
  console.log(event.detail.data.age);
});