Javascriptでカスタムイベントを作成するにはどうすればよいですか? (コード例)

JavaScript イベントとリスナーの使用は非常に簡単です。たとえば、次のクリック イベントは誰もがよく知っていると思います:

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

上記のコードは、私の- ボタンをクリックすると、このクリック イベント (および他の多くのイベント) がすでに利用可能になります。しかし、独自のイベントを作成したい場合はどうすればよいでしょうか? それは実際には非常に簡単です。

カスタム イベントの作成

カスタム イベントを作成するには、次のように実行できます:

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 イベント (またはカスタム イベント) が発生するたびに、上記のコードが実行されます。

アプリケーションでカスタム イベントを使用すると、コードを整理して読みやすくすることができます。また、1 か所でイベントをトリガーでき、リスナーがリッスンしている場所であればどこでも必要な機能を実行できるため、メンテナンスも容易になります。

関連する推奨事項: "javascript チュートリアル "

この記事は、JavaScript でカスタム イベントを作成する方法を紹介します。困っている友人のお役に立てれば幸いです。

以上がJavascriptでカスタムイベントを作成するにはどうすればよいですか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。