JavaScript 自定义事件

几乎每个 Web 应用程序都使用事件，例如当用户单击某物时， onclick 事件用于执行某些代码。已经有许多内置事件可供使用，但如果我们想要自己的自定义事件怎么办？假设我们正在创建一个聊天应用程序，并且我们希望在最终用户发送一些消息时执行一些代码。没有内置事件可以检测到这一点。这里我们需要一个可以处理这种自定义场景的自定义事件。

创建自定义事件：要创建自定义事件，我们使用Event构造函数或CustomEvent接口。 Event 构造函数创建一个 Event，而 CustomEvent 创建一个具有更多功能的 Event。

为了使用新的Event创建一个，请遵循以下步骤。

• 我们使用 Event 构造函数创建一个事件。
• 我们使用addEventListener()方法监听这个事件。
• 我们使用element.dispatchEvent(eventName)方法触发或调度事件。
• 现在已经创建了一个名为start的自定义事件。

句法：

// To assign event
const startEvent = new Event("start");

// To trigger the event Listener
document.addEventListener("start", () => {
    console.log("The start event was triggered")
});

// To trigger the Event
document.dispatchEvent(startEvent);

示例：在此示例中，我们正在创建一个在x的值为 5 时触发的事件。

HTML

  
    let x = 5;
    const event = new Event("start");
     
    document.addEventListener('start', ()=>{
      console.log("Start event triggered")
    });
     
    if(x == 5){
      document.dispatchEvent(event);
    }
  

输出：

"Start event triggered"

使用 CustomEvent 创建自定义事件：使用 CustomEvent 接口创建自定义事件有一个优势，因为它可以发送自定义数据。按照以下步骤创建新的 CustomEvent。

• 我们使用 CustomEvent 构造函数创建自定义事件。
• 这需要两个参数，第一个是事件的名称，第二个是包含数据的对象。对象名称中的属性名称应命名为detail否则将不起作用。
• 我们为此事件创建一个监听器。
• 我们触发或调度事件。
• 已创建包含数据的自定义事件。

句法：

// To assign event
const event = new CustomEvent("start", {
      detail: {
        platform : "GeeksforGeeks"
      }
});

// To trigger the event Listener
document.addEventListener('start', (e)=>{
      console.log(
        `start event triggered on platform :
        ${e.detail.platform}`
        );
});

// To trigger the Event
document.dispatchEvent(event);

示例 2：在此示例中，我们正在创建一个自定义事件，该事件在x的值为 5 时触发。

HTML

 

  
    let x = 5;
     const event = new CustomEvent("start", {
      detail: {
        platform : "GeeksforGeeks"
      }
    });
     
    document.addEventListener('start', (e) => {
      console.log(
        `Start event triggered on platform
        ${e.detail.platform}`
      );
    })
     
    if (x == 5) {
      document.dispatchEvent(event);
    }
  

输出：

Start event triggered on platform GeeksforGeeks

注意：我们使用document.dispatchEvent('start')直接从文档调度事件， 但是可以从任何需要的元素（例如myBtn.dispatchEvent('start') ）分派事件。