問題一覧に戻る
中級dom
問題104: addEventListener

addEventListenerメソッドによるイベントリスナーの登録を学びましょう。addEventListenerはDOM要素にイベントハンドラを追加する標準的な方法で、同じイベントに複数のハンドラを登録でき、イベントの伝播やキャプチャリングを制御できます。クリック、マウス移動、キーボード入力、フォーム送信など、あらゆるユーザーインタラクションを処理するために不可欠です。古いonclick属性よりも柔軟で強力です。

const button = {
  handlers: [],
  addEventListener: function(event, fn) {
    this.handlers.push(fn);
  },
  click: function() {
    this.handlers.forEach(fn => fn());
  }
};

button.("click", () => console.log("Clicked"));
button.click();