javascriptの (e)の意味が理解できません…。

Question

この件については色々と説明されているページを拝見しているのですが、どれを読んでもいまいち理解ができず困っております。

タイトルの通りなのですが、function(e)という形式で書かれているものをよく見かけるのですが、この(e)の意味と役割が理解できません…。無くしてしまっても動作するようですし。。

<script>
let box = document.getElementById("box");

box.addEventListener('click',function(e){
this.style.backgroundColor = 'red'; 
});

window.addEventListener('keydown', function(e) {
document.write(e.keyCode);
});
</script>

この(e)は、具体的にどういたときに必要で、その目的とは一体何になりますでしょうか？
今回の様に無くしてしまっても困らない（動作する）場合がある反面（e）を付けなければ困る状況というものがあるのだと考えております。
この困る状況も教えて頂けないでしょうか。
宜しくお願いいたします。

Answer 1

イベントリスナーの第一引数（例示のコードではe）は、そのイベントの情報が盛り込まれた「イベントオブジェクト」です。
例示のclickイベントに対応するイベントリスナーではeの内容は参照していませんが、keydownイベントに対応するイベントリスナーでは、e.keyCodeで、どのキーが押されたのかを参照していますね。そのように情報が必要ならfunction(e)のようにして情報を受け取って利用するということです。

Comments

[yukina00235]

有難うございます。
>>keydownイベントに対応するイベントリスナーでは、e.keyCodeで、どのキーが押されたのかを参照していますね。

keydownイベントというのはわかるのですが、keyCodeというのは何になるのでしょうか？
keydownの中に、さらに何かが入っているイメージなのでしょうか？eで呼び出す？？
その場合、keyCode　は何という物？になるのでしょうか？

イベントリスナーで調べても、on が付いたものとしか説明が無く…。
click イベント、　onclick イベントリスナー的な…。

[itagagaki]

e というデータの中に、さらに keyCode というデータが入っているのです。
e.keyCode と記述したら、e というデータの中にある keyCode というデータを参照することになります。

こちらでオブジェクト型のデータについて学んでみてください。
https://tsudoi.org/weblog/4767/#:~:text=%E5%80%A4%E3%81%8C%E3%83%97%E3%83%AA%E3%83%9F%E3%83%86%E3%82%A3%E3%83%96%E5%9E%8B%E3%81%AE,%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%82%82%E5%8F%AF%E8%83%BD%E3%81%A7%E3%81%99%E3%80%82&text=%E3%80%8C%E5%90%89%E6%9C%AC%E3%80%8D%E3%81%A8%E3%81%84%E3%81%86%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%E3%83%87%E3%83%BC%E3%82%BF%E3%81%8C,%E3%81%AB%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%A6%E3%81%84%E3%81%BE%E3%81%99%E3%80%82

Answer 2

イベントオブジェクトですね、コールバック関数内で使用していない場合、省略しても動作します。

JavaScriptにおけるfunction(e)の「e」とは何なのか？

Comments

[yukina00235]

有難うございます。
省略しても良いとのことですが、あえて記述されているコードを多々見受けるので詳細が分かればと思いまして…。

[退会済みユーザー]

その辺は書いた人の考え方次第ですかね。
あくまでも省略しても動作するだけであり、本来引数としては必要なので、
「あえて記述されている」というよりは逆に「あえて省略されている」だと思います。

Answer 3

box.addEventListener('click',function(e){

this.style.backgroundColor = 'red';
});

addEventListenerでオブジェクト自身を掴むのはthisより
e.targetを利用するほうが汎用的です。

window.addEventListener('keydown', function(e) {

document.write(e.keyCode);
});

すでにDOM配置が完了したHTMLにdocument.writeはNGです
appendしたり特定のHTML要素のtextContentやinnerHTMLを書き換えたりして
処理してください