如何在Javascript中建立自訂事件？ （程式碼範例）

使用javascript事件和監聽器是非常簡單的，例如下面的點擊事件相信大家都比較熟悉：

document.getElementById('my-button').addEventListener('click', function(){
    console.log('do something awesome!');});

上面的程式碼將在點擊my- button時運行，並且這個單擊事件(以及許多其他事件)已經可供我們使用。但是，如果你想創建自己的事件呢?這其實也很簡單。

建立自訂事件

為了建立自訂事件，我們可以如下所示:

function create_custom_event(){
    
    var element = document.getElementById('my-button');
    
    element.classList.add('active')
    
    // 创建一个新的自定义事件
    var event = new CustomEvent('madeActive');
    // 分派元素上的事件
    element.dispatchEvent(event);}

上面我們剛剛建立了一個名為madeActive的自訂事件，所以現在在應用程式的任何地方，我們都可以監聽這個事件，並在觸發該事件時運行一些新功能。

偵聽自訂事件

偵聽自訂事件將與javascript中的其他事件監聽器完全相同。你將addEventListener附加到你的元素並指定你正在監聽的事件：

document.getElementById('my-button').addEventListener('madeActive', function(){
    console.log('Awesome, my own custom Event!');});

現在，只要觸發了madeActive事件(或自訂事件)，上面的程式碼就會運行。

在應用程式中使用自訂事件可以幫助你組織程式碼並使其更具可讀性。它還可以使維護變得更容易，因為你可以在一個地方和監聽器正在監聽的任何地方觸發事件，它可以運行你想要的功能。

相關推薦：《javascript教學》

這篇文章就是關於Javascript建立自訂事件的相關介紹，希望對需要的朋友有幫助！

以上是如何在Javascript中建立自訂事件？ （程式碼範例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！