2026.01.22

【JavaScript】イベント処理ってなに？（addEventListener）

takahide

おはようございます。タカヒデです。

本日は、「JavaScriptにおける、『イベント処理』および『addEventListenerメソッド』」を紹介します。

こんな人にオススメ

JavaScriptにおける『イベント処理』が理解できない
『addEventListenerの記載方法』を知りたい

ぜひ本記事を参考にしてください。

Contents

イベント処理とは
イベント処理（addEventListener）の記載方法
主なイベント処理一覧
まとめ

イベント処理とは

そもそも「イベント処理」って何ですかね？
初学者からするとこの言葉も馴染みが無いと思います。

イベント処理とは、ページ読み込みやクリック等のイベントに対応して実施する処理のことです。

具体的には、クリック・ページ読み込み・スクロールなどの処理をイベント処理と呼びます。

普段私たちが行っている操作ですね。

またこのようなイベント処理を定義する関数を『イベントリスナー』『イベントハンドラー』と呼びます。

厳密にいうと『リスナー』と『ハンドラー』はちょっと違うみたいなんですが、まあよくわからないので同じようなものって理解で良いと思います。

イベント処理（addEventListener）の記載方法

では、実際にイベント処理の記載方法を見ていきましょう。

イベント処理を実行するには、『addEventListenerメソッド』を使用します。

//記載方法

要素.addEventListener(イベントの種類,実行するコード,オプション)

//記載方法

要素.addEventListener(イベントの種類,実行するコード,オプション)

ちなみに、この記載方法のうち、「オプション」の部分は省略して記載することができます。

以下が記載例です。

<p id="text">変化前のテキストです</p>

<p id="text">変化前のテキストです</p>

let testText = document.querySelector("#text");

testText.addEventListener("click", function () {
    this.textContent = "テキストが変化しました"
})

let testText = document.querySelector("#text");

testText.addEventListener("click", function () {
    this.textContent = "テキストが変化しました"
})

ここでは、クリック処理によってテキストが変化する処理を記載しています

変数『testText』を宣言し、『querySelector』によって取得した、『text』idを格納しています。

その後、変数『testText』に対し『addEventListener』メソッドを宣言し、クリック時にテキストを変更するコードを記載しています。

実際に実行してみましょう。

『変化前のテキストです』というテキストをクリックすることで『テキストが変化しました』というテキストに変更されます。

動きがあって面白いですね。

主なイベント処理一覧

実はイベント処理にはクリック処理以外にもたくさんのイベントがあるみたいです。

ここでは主なイベント一覧を紹介します。

項目	イベント	タイミング
読み込み	abort	画像の読み込み中断時
読み込み	load	ページや画像の読み込み完了時
クリック	click	クリック時
クリック	dblclick	ダブルクリック時
マウス	mousedown	マウスボタンを押した時
	mouseup	マウスボタンを離した時
	mousemove	マウスカーソルが要素内で移動した時
	mouseover	マウスカーソルが要素に乗った時
	mouseout	マウスカーソルが要素から離れた時
	wheel	マウスホイールを回している時
キーボード	keydown	キーボードを押した時
キーボード	keyup	キーボードを離した時
タッチ	touchstart	タッチした時
	touchmove	タッチして動かした時
	touchend	タッチして離れた時
フォーム	input	フォームに入力した時
	change	フォームの値を変更してフォーカスが外れた時
	reset	リセットボタンを押した時
	submit	フォーム送信ボタンを押した時
フォーカス	focusin	要素にフォーカスされた時
フォーカス	focusout	要素からフォーカスが離れた時
編集	copy	コピーをした時
	cut	切り取りをした時
	paste	貼り付けをした時
その他	resize	ウインドウのサイズを変更した時
その他	scroll	スクロールした時