JavaScript事件處理自定義事件如何

在JavaScript中，自定義事件允許您創(chuàng)建并觸發(fā)自己的事件，以便在代碼的不同部分之間進行通信。以下是如何創(chuàng)建和觸發(fā)自定義事件的步驟：

1. 創(chuàng)建自定義事件：

使用CustomEvent()構(gòu)造函數(shù)創(chuàng)建一個新的自定義事件。您需要傳遞兩個參數(shù)：事件名稱（字符串）和一個包含有關(guān)事件的詳細信息（可選的對象）。

const myCustomEvent = new CustomEvent('myCustomEvent', {
  detail: {
    message: 'Hello, this is my custom event!',
    otherInfo: 'Some additional data'
  }
});

2. 添加事件監(jiān)聽器：

使用addEventListener()方法為自定義事件添加一個事件監(jiān)聽器。您需要傳遞兩個參數(shù)：事件名稱（字符串）和一個回調(diào)函數(shù)。

document.addEventListener('myCustomEvent', (event) => {
  console.log('Custom event triggered!');
  console.log('Event details:', event.detail);
});

3. 觸發(fā)自定義事件：

使用dispatchEvent()方法觸發(fā)自定義事件。您需要傳遞一個參數(shù)：您創(chuàng)建的自定義事件對象。

document.dispatchEvent(myCustomEvent);

將以上代碼放在一起，完整的示例如下：

// 創(chuàng)建自定義事件
const myCustomEvent = new CustomEvent('myCustomEvent', {
  detail: {
    message: 'Hello, this is my custom event!',
    otherInfo: 'Some additional data'
  }
});

// 添加事件監(jiān)聽器
document.addEventListener('myCustomEvent', (event) => {
  console.log('Custom event triggered!');
  console.log('Event details:', event.detail);
});

// 觸發(fā)自定義事件
document.dispatchEvent(myCustomEvent);

當(dāng)自定義事件被觸發(fā)時，瀏覽器將執(zhí)行與該事件關(guān)聯(lián)的所有事件監(jiān)聽器。