JavaScriptのイベント処理で複数の関数を実行する方法

1. addEventListenerで複数の関数を登録する方法

1. addEventListenerで複数の関数を登録する方法

addEventListenerは、同じイベントに複数の関数を登録できる便利なメソッドです。これにより、1つのクリックイベントで複数の処理を順番に実行できます。

const button = document.getElementById("myButton");

function greet() {
  console.log("こんにちは！");
}

function showAlert() {
  alert("ボタンがクリックされました！");
}

// addEventListenerで複数の関数を登録
button.addEventListener("click", greet);
button.addEventListener("click", showAlert);

この例では、ボタンをクリックするとまずコンソールに「こんにちは！」が表示され、その後アラートが表示されます。

2. 1つの関数内で複数の処理を実行する方法

2. 1つの関数内で複数の処理を実行する方法

もう一つの方法は、1つのイベントリスナーにまとめて複数の関数を呼び出す方法です。この方法では、関数をまとめて管理できます。

const button = document.getElementById("myButton");

function greet() {
  console.log("こんにちは！");
}

function showAlert() {
  alert("ボタンがクリックされました！");
}

// 1つの関数内で複数の関数を呼び出す
button.addEventListener("click", () => {
  greet();
  showAlert();
});

この場合も順番に実行されますが、関数の追加や削除がまとめて管理しやすくなります。

3. 注意点とベストプラクティス

3. 注意点とベストプラクティス

複数の関数をイベントに登録する場合、いくつか注意点があります。

• 同じ関数を複数回登録すると、同じ処理が重複して実行されるので注意。
• 処理が重い関数を複数登録すると、クリック後の反応が遅くなることがある。
• 関数の実行順序を意識する。addEventListenerでは登録順に実行されます。

小さな関数に分けて管理することで、後から追加や修正が簡単になります。

4. 応用：配列で関数をまとめて実行する方法

4. 応用：配列で関数をまとめて実行する方法

複数の関数を配列に入れて、ループで順番に実行することもできます。大量の処理をまとめて管理したいときに便利です。

const button = document.getElementById("myButton");

function greet() { console.log("こんにちは！"); }
function showAlert() { alert("ボタンがクリックされました！"); }
function logTime() { console.log("クリック時刻:", new Date()); }

// 関数を配列にまとめる
const actions = [greet, showAlert, logTime];

button.addEventListener("click", () => {
  actions.forEach(fn => fn());
});

この方法なら、関数を増やす場合も配列に追加するだけで簡単に順番に実行できます。

5. まとめると

5. まとめると

JavaScriptのイベント処理で複数の関数を実行する方法は主に3つです。

• addEventListenerを複数回使う
• 1つの関数内で複数の関数を呼ぶ
• 配列にまとめてループで呼ぶ

用途や管理のしやすさに応じて使い分けることで、効率的にイベント処理を実装できます。