単一の Onclick イベントから複数の JavaScript 関数を呼び出すにはどうすればよいですか?

Onclick イベントでの複数の JavaScript 関数の呼び出し

onclick イベント ハンドラーは、要素がクリックされたときに JavaScript コードを実行するためによく使用されます。ただし、同じクリック イベントに応答して複数の関数を呼び出す必要がある場合はどうすればよいでしょうか?

複数の関数に onclick を使用する

ベスト プラクティスとは考えられていませんが、次のことが可能です。 onclick 属性を使用して、複数の JavaScript 関数をセミコロンで区切って呼び出します。 (;).

<button onclick="doSomething();doSomethingElse();">Click Me</button>

目立たないアプローチ

より現代的で推奨される方法は、JavaScript を使用してイベント ハンドラーを DOM ノードにアタッチすることです。これは目立たない JavaScript として知られています。その方法は次のとおりです。

const button = document.querySelector('button');

button.addEventListener('click', () => {
  doSomething();
  doSomethingElse();
});

目立たない JavaScript の利点

目立たないアプローチを使用すると、次のような利点があります。

• 改善関心事の分離 (コードと HTML は別途)
• メンテナンスとデバッグが簡単になりました
• 最新の JavaScript フレームワークとライブラリのサポート

以上が単一の Onclick イベントから複数の JavaScript 関数を呼び出すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。