JavaScriptにおけるイベントオブジェクトとは、ユーザーがブラウザ上で起こしたアクション（例えば、クリック、キー入力、マウス移動など）に関する情報を含んだオブジェクトのことです。
と、このように説明しても何が何やら分かりにくいと思いますのでもう少しかみ砕いてみましょう。
そもそもイベントとは？
イベントとは、ユーザーがブラウザ上で何らかのアクションを起こしたときに発生するもので、JavaScriptでこれらのイベントを監視して処理することができます。以下にいくつかのイベントとそれらの説明を示します。
clickイベント
クリックイベントは、ユーザーがマウスの左ボタンをクリックしたときに発生します。これは、ボタンやリンクをクリックした場合によく使用されます。
keydownイベント
キーダウンイベントは、ユーザーがキーボードのキーを押したときに発生します。たとえば、以下のコードは、ユーザーがEnterキーを押した場合にアラートを表示します。
document.addEventListener('keydown', function(event) {
if (event.key === 'Enter') {
alert('Enter key pressed!');
}
});mouseoverイベント
マウスオーバーイベントは、ユーザーがマウスポインタを要素の上に移動したときに発生します。
submitイベント
サブミットイベントは、ユーザーがフォームを送信したときに発生します。
イベントオブジェクトの存在意義
イベントオブジェクトは、イベントが発生した要素（例えば、ボタンやリンクなど）を参照し、イベントが発生した時刻、マウスの座標、キーの種類などの情報を提供します。これにより、イベントが発生した状況をJavaScriptで処理することができます。
たとえば、以下のようなコードを書くことで、クリックイベントの情報を取得できます。
document.querySelector('button').addEventListener('click', function(event) {
console.log(event.target); // クリックされた要素を参照
console.log(event.clientX, event.clientY); // マウスの座標を取得
console.log(event.type); // イベントの種類を取得
});このように、イベントオブジェクトを使用することで、ブラウザ上でのユーザーのアクションに対するJavaScriptの反応を制御することができます。
function(event) とは何か
function(event)は、JavaScriptでイベントを処理するために使用される関数です。この関数は、イベントが発生したときに自動的に呼び出され、イベントに関する情報を引数として受け取ります。
たとえば、以下のように、addEventListener()メソッドを使用してクリックイベントを監視するときに、function(event)を使用してイベントを処理することができます。
const button = document.querySelector('button');
button.addEventListener('click', function(event) {
console.log('Button clicked!');
});この例では、addEventListenerメソッドによってクリックイベントが監視され、function(event)がクリックイベントが発生したときに自動的に呼び出されます。event引数には、イベントに関する情報が含まれています。この情報を使用して、クリックされた要素を参照したり、イベントが発生した座標を取得したりすることができます。
ちなみに以前書いた記事の「クリックイベントで要素の中に含まれる特定の要素を除外したいときの対処法【JavaScript】」では、もう少し突っ込んだeventオブジェクトの利用例を紹介していますので併せてご覧ください。
function(event) {…} は別途宣言した関数名でもOK
イベントハンドラ関数としても知られているfunction(event)は、イベントを処理するために一般的に使用されます。ただし、関数の名前を指定することもできます。例えば、以下のコードでは、名前付き関数handleClickがクリックイベントを処理します。
const button = document.querySelector('button');
button.addEventListener('click', handleClick);
function handleClick(event) {
console.log('Button clicked!');
}この例では、handleClick関数がクリックイベントを処理するために使用されています。addEventListenerメソッドによって、クリックイベントが監視され、handleClick関数が自動的に呼び出されます。先述の通り、event引数にはイベントに関する情報が含まれている、ということを必ず押さえておきましょう。
（参考：https://developer.mozilla.org/ja/docs/Web/API/Event）
イベントオブジェクトが使用できないケース
一般的な例としては、以下のようなものがあります。
- イベントが発生した要素が存在しない場合：例えば、
windowオブジェクト上で発生するloadイベントや、documentオブジェクト上で発生するDOMContentLoadedイベントは、イベントオブジェクトを提供しません。 - イベントが発生した要素がブラウザー標準の動作を実行した場合：例えば、
clickイベントが発生した要素がリンクやフォームの送信ボタンである場合、ブラウザーはデフォルトでリンクを開いたり、フォームを送信します。この場合、イベントオブジェクトは提供されますが、それによってイベントの詳細情報にアクセスできなくなります。 - イベントが発生した要素が非表示の場合：例えば、
visibilitychangeイベントは、ページのタブが非アクティブになったときに発生します。しかし、ページが完全に非表示になっている場合、イベントオブジェクトが提供されない場合があります。
これらの場合、イベントオブジェクトが提供されないため、イベントの詳細情報にアクセスできなくなります。そのため、イベント処理の際には、このような場合を考慮して、適切なエラー処理を行う必要があります。
