問題一覧に戻る
中級dom
問題110: イベントオブジェクト

イベントオブジェクトの構造と使用方法を学びましょう。イベントハンドラが呼び出されるとき、イベントに関する詳細情報を含むイベントオブジェクトが引数として渡されます。type（イベント種別）、target（イベント発生元）、currentTarget（リスナー登録元）、preventDefault()（デフォルト動作のキャンセル）、stopPropagation()（イベント伝播の停止）など、イベント処理に必要なすべての情報とメソッドが含まれています。

const button = {
  addEventListener: function(type, handler) {
    const event = {
      type: type,
      target: this,
      preventDefault: () => console.log("Default prevented")
    };
    handler(event);
  }
};

button.addEventListener("click", () => {
  console.log(.type);
  console.log(.target === button);
  .preventDefault();
});