Help us understand the problem. What is going on with this article?

addEventListener() メソッドの引数 listener に設定するコールバック関数で、引数 (event)を省略した場合でも動作する理由

addEventListener() メソッドの引数 listener に設定するコールバック関数は、引数 (event) を省略した場合でも動作する。具体的には、次の通り「引数を省略しない場合」と「引数を省略した場合」が同様に動作する。

sample1.js
// 引数を省略しない場合('event'を引数として設定)
document.getElementById('sampleElement').addEventListener('click', (event) => {
  event.target.style.backgroundColor = 'red';
});

// 引数を省略する場合
document.getElementById('sampleElement').addEventListener('click', () => {
  event.target.style.backgroundColor = 'red';
});

Q. なぜ引数を省略しても動作するのか

A. 引数を省略する場合の event は、window.eventを指し、現在サイトのコードが処理している Event を返すため。

解説

addEventListener() メソッドの引数 listener に設定するコールバック関数は、handleEvent() メソッドを有する。handleEvent() の構文は次の通り event オブジェクトを引数に取る。

handleEvent()
eventListener.handleEvent(event);

そのため、前述「引数を省略する場合」のように記述することは、動作はするがそもそも望ましくないと考えられる。動作する理由は、引数を省略した場合でも(引数を省略しない場合の)event に相当するデータを window.event にて取得できているため。したがって、"結果的に"同様に動作する。

引数を省略した場合をより正確に記述すると次の通りになる。

sample2.js
// 引数を省略する場合
document.getElementById('sampleElement').addEventListener('click', () => {
  window.event.target.style.backgroundColor = 'red';
});

つまり、引数を省略しない場合の event.target と 引数を省略しない場合の event.target は一見して同じ記述であるようにも見受けられるが、実は引数を省略する場合の event.targetwindow.event.target であり、(結果的に動作は同様となるものの)別物である。

最後に window.event は MDN にて次の通り使用を避けるよう記述がある点を伝え、解説を終える。

新しいコードではこのプロパティの使用を避けるべきであり、代わりにイベントハンドラー関数になる Event を使用してください。このプロパティは広くサポートされておらず、またサポートされていてもコードが壊れやすくなるおそれがあります。
引用元: Window.event - Web API | MDN

以上。

To JavaScript 有識者の方。もし内容に誤りがあればぜひご指摘願いたい。

[参考] EventTarget.addEventListener() - Web API | MDN

drytt
やってみる人。学ぶ、楽しむ、やってみる。コンピュータとWebと家族が大好きです。周りの人が少しでも便利になったり楽しくなったりする世界をITで作ります。情報処理安全確保支援士試験合格(2017)。個人開発。
https://drytt.com
admin-guild
「Webサービスの運営に必要なあらゆる知見」を共有できる場として作られた、運営者のためのコミュニティです。
https://admin-guild.slack.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした