先生と生徒の会話形式で理解しよう

生徒

「ボタンをクリックしたときに、いくつかの処理を順番に実行したいのですが、どうすればいいですか？」

先生

「JavaScriptのイベント処理では、1つのイベントに複数の関数を登録することができます。順番に実行されるので、複数の処理をまとめて呼び出せます。」

生徒

「具体的にはどう書けばいいですか？」

先生

「addEventListenerを使う方法や、1つの関数内で複数の関数を呼ぶ方法があります。順に見ていきましょう。」

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つの関数内で複数の処理を実行する方法

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


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

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

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

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

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

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

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

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

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

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());
});

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