JavaScript イベント管理

1. イベントの追加

イベント管理（Event Management）の本質は、イベントの追加、削除、そして制御にあります。
JavaScriptで要素に特定の動作を紐付けるには、addEventListener を使用するのが最も標準的かつ安全な方法です。

コード例

<button id="btn">クリック</button>

<p id="demo"></p>

<script>
const btn = document.getElementById("btn");

// ボタン（btn）にクリックイベントをリッスンさせる
btn.addEventListener("click", myFunction);

function myFunction() {
  document.getElementById("demo").innerHTML = "クリックされました！";
}
</script>

2. イベントの削除

一度追加したイベントを動的に取り除きたい場合は、removeEventListener メソッドを使用します。

コード例

<button id="add">追加</button>
<button id="remove">削除</button>
<button id="test">テストクリック</button>

<p id="demo"></p>

<script>
const test = document.getElementById("test");
const remove = document.getElementById("remove");
const add = document.getElementById("add");

function myFunction() {
   document.getElementById("demo").innerHTML += "こんにちは！";
}

// 追加ボタンにクリックイベントを登録
add.addEventListener("click", function () {
  // テストボタンにクリックイベントをリッスンさせる
  test.addEventListener("click", myFunction);
});

// 削除ボタンにクリックイベントを登録
remove.addEventListener("click", function () {
  // テストボタンのクリックイベントのリッスンを停止させる
  test.removeEventListener("click", myFunction);
});
</script>

       重要： イベントリスナーを削除するには、追加した時とまったく同じ名前付き関数を指定する必要があります。匿名関数（名前のない関数）で登録した場合、後から削除することができないので注意しましょう。

3. イベントのブロック（デフォルト挙動の抑制）

ブラウザがデフォルトで行う動作（リンクをクリックした際の遷移や、フォーム送信時のページリロードなど）をプログラムで中断させたい場合があります。その際は、event.preventDefault() を使用します。

3.1 コード例：デフォルト挙動の防止（リンクのブロック）

<a href="https://www.google.com" id="link">Googleへ移動</a>

<p id="demo"></p>

<script>
const link = document.getElementById("link");

// リンクにクリックイベントをリッスンさせる
link.addEventListener("click", function (event) {
  // デフォルトの遷移挙動をブロック
  event.preventDefault();
  document.getElementById("demo").innerHTML = "リンクの挙動がブロックされました！";
});
</script>

このようにイベントを自在にコントロールすることで、ユーザー体験（UX）を損なうことなく、洗練されたインタラクションをウェブサイトに実装することができます。