JavaScriptのイベント処理Tips！実務で役立つ便利テクニック集

1. イベント委譲（Event Delegation）を使う

1. イベント委譲（Event Delegation）を使う

イベント委譲とは、親要素にイベントをまとめて設定し、子要素で発生したイベントを処理する方法です。動的に生成される要素にも対応でき、複数のイベントリスナーを登録する手間を減らせます。

const list = document.getElementById("itemList");

list.addEventListener("click", (event) => {
  if (event.target.tagName === "LI") {
    console.log(event.target.textContent + "がクリックされました");
  }
});

このように書くことで、後から追加したリスト項目でもクリックイベントが機能します。

2. 複数関数を一度に実行する

2. 複数関数を一度に実行する

1つのイベントで複数の処理を行いたい場合、関数をまとめて呼び出す方法があります。これにより、コードが整理され、保守性が高くなります。

function func1() { console.log("処理1"); }
function func2() { console.log("処理2"); }

button.addEventListener("click", () => {
  func1();
  func2();
});

3. Debounceでイベント発火を制御する

3. Debounceでイベント発火を制御する

スクロールや入力などで頻繁にイベントが発火するとパフォーマンスが悪化します。debounceという方法で、処理の発火を一定時間遅らせることができます。

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

const input = document.getElementById("search");
input.addEventListener("input", debounce(() => {
  console.log("検索処理を実行");
}, 300));

これで、ユーザーが入力を止めてから処理が実行されます。

4. Throttleでイベント頻度を制御する

4. Throttleでイベント頻度を制御する

スクロールやウィンドウリサイズでイベントが連続して発生する場合は、throttleを使って処理を一定間隔に制御します。これにより、重い処理でも安定して動作します。

function throttle(func, limit) {
  let inThrottle;
  return function() {
    if (!inThrottle) {
      func();
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

window.addEventListener("resize", throttle(() => {
  console.log("リサイズ処理");
}, 500));

5. onceオプションで1回だけイベントを実行

5. onceオプションで1回だけイベントを実行

イベントリスナーを1回だけ実行したい場合、once: trueオプションを使うと簡単です。これにより不要なイベント登録を減らせます。

button.addEventListener("click", () => {
  console.log("この処理は1回だけ実行されます");
}, { once: true });

6. イベントオブジェクトで詳細情報を取得

6. イベントオブジェクトで詳細情報を取得

イベントオブジェクトを利用すると、クリックされた要素やマウス座標などを取得できます。これにより、より柔軟な処理が可能です。

button.addEventListener("click", (event) => {
  console.log("クリック位置:", event.clientX, event.clientY);
  console.log("対象要素:", event.target);
});

7. 実務で役立つテクニックまとめ

7. 実務で役立つテクニックまとめ

• イベント委譲で動的要素にも対応
• 複数関数をまとめて実行してコードを整理
• Debounceで入力やスクロールの負荷を軽減
• Throttleで連続イベントを制御
• onceオプションで1回だけイベント処理
• イベントオブジェクトを活用して柔軟な処理

これらを活用することで、実務で効率的で安全なJavaScriptのイベント処理が可能になります。