Wie erstelle ich benutzerdefinierte Ereignisse in Javascript? (Codebeispiel)

Es ist sehr einfach, Javascript-Ereignisse und -Listener zu verwenden. Ich glaube, dass jeder mit dem folgenden Klickereignis vertraut ist:

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

Der obige Code wird verwendet when my-button, und dieses Click-Event (sowie viele andere Events) steht uns bereits zur Verfügung. Aber was ist, wenn Sie Ihre eigenen Veranstaltungen erstellen möchten? Das ist eigentlich ganz einfach.

Benutzerdefiniertes Ereignis erstellen

Um ein benutzerdefiniertes Ereignis zu erstellen, können wir so etwas tun:

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

Oben haben wir gerade ein Ereignis namens madeActive erstellt Benutzerdefiniertes Ereignis, sodass wir dieses Ereignis jetzt überall in der Anwendung abhören und einige neue Funktionen ausführen können, wenn dieses Ereignis ausgelöst wird.

Abhören benutzerdefinierter Ereignisse

Das Abhören benutzerdefinierter Ereignisse funktioniert genauso wie andere Ereignis-Listener in Javascript. Sie hängen addEventListener an Ihr Element an und geben das Ereignis an, auf das Sie warten:

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

Jetzt wird der obige Code immer dann ausgeführt, wenn das madeActive-Ereignis (oder das benutzerdefinierte Ereignis) ausgelöst wird.

Die Verwendung benutzerdefinierter Ereignisse in Ihrer Anwendung kann Ihnen helfen, Ihren Code zu organisieren und ihn lesbarer zu machen. Es erleichtert auch die Wartung, da Sie Ereignisse an einem Ort auslösen können und überall dort, wo der Zuhörer zuhört, die gewünschte Funktionalität ausgeführt werden kann.

Verwandte Empfehlungen: „Javascript-Tutorial“

Dieser Artikel ist eine Einführung in die Erstellung benutzerdefinierter Ereignisse in Javascript. Ich hoffe, dass er Freunden in Not hilfreich sein wird!

Das obige ist der detaillierte Inhalt vonWie erstelle ich benutzerdefinierte Ereignisse in Javascript? (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!