javascritの(e)または(event)についてアドバイス願います。

javascritのコードを見ていますと、時々functionに続いて(e)などの記述を見かけるのですが、色々と調べてみるのですが、いまいち意味が理解できず困っております。
この(e)や(event)として定義するイベントとはどういった意味で、どのようなときに必要になるものでしょうか？

document.getElementById("hoge").addEventlistner("click", function (event) {
event.preventDefalut();
　…
});

例えばこのような記述の時、なぜ(event)としてから、event.preventDefalut();　と指定しているのでしょうか？
このeventは何の中身を引っ張り出しているのでしょうか？

お詳しい方いらっしゃいましたらアドバイス頂けないでしょうか？
宜しくお願いいたします。

No.2 ベストアンサー 回答者： fujillin 回答日時： 2021/05/30 23:55

No1です

＞ここでいうeventとは何に対してのeventなのでしょうか？
DOMエレメントやオブジェクトにもともと設定されているイベントです。
エレメントやオブジェクトによって内容が異なります。
質問文にご提示の例でいえば、IDがhogeの要素のクリックイベントを取得しています。
クリック等のマウスイベントの他にも、ウィンドウのloadイベントや、スクロールイベントなど各種ありますし、ユーザが独自のイベントを定義することも可能です。
・マウスイベントの例
https://developer.mozilla.org/ja/docs/Web/API/Mo …

＞keydownの中のkeyCodeなどをeで受け取っている感じなのでしょうか？
受け取っているのは、No1にも書きましたように「イベントオブジェクト」です。
イベント発生の際に、イベントの内容等を保持しているオブジェクトです。
https://developer.mozilla.org/ja/docs/Web/API/Ev …
https://developer.mozilla.org/ja/docs/Learn/Java …

＞event.preventDefalut();　のpreventDefalut();はどれの中に入っているものなのでしょうか？
preventDefault()はイベントオブジェクトのメソッドです。
意味としては、デフォルトの動作をキャンセルするものです。
（キャンセル不可の動作もあります）
https://developer.mozilla.org/ja/docs/Web/API/Ev …

＞これらのeventを一覧で確認する方法などありますでしょうか？
主なイベントの一覧は、以下で確認できます。
さらに、具体的な種類等については、それぞれの項目をご覧ください。
https://developer.mozilla.org/ja/docs/Web/API/Ev …

この回答へのお礼

何度も有難うございます。
完全に理解をしきれてはおりませんが、少しわかってきたように思います。
色々と試しながら理解を深めていこうと思います。㎜

お礼日時：2021/05/31 16:23

No.1 回答者： fujillin 回答日時： 2021/05/30 17:20

こんにちは

詳しいわけではありませんけれど・・・

ご提示の例のeventは、引数として渡される値を受け取る「仮引数」です。
ですので、変数名は何でも良いのですが、イベントオブジェクトを受け取るので、eやeventなどが使われることが多いのでしょう。

addEventlistnerは「イベントが発生したときに呼び出される関数を設定する」メソッドですが、ご提示の例では、click時にfunction(){～～}の処理が実行されます。
その際に、イベントオブジェクトが引数として渡される仕様になっています。
https://developer.mozilla.org/ja/docs/Web/API/Ev …


＞この(e)や(event)として定義するイベントとはどういった意味で、
＞どのようなときに必要になるものでしょうか？
・どういった意味
イベントの内容を示す「イベントオブジェクト」です。
イベントの種類や内容に応じて様々なプロパティ等を有しています。
例えば、マウスクリックならクリックの発生した位置座標とか、キーイベントなら操作したキーの種類とか・・・
https://developer.mozilla.org/ja/docs/Web/API/Ev …

・どのようなときに必要
イベント処理内で上記の情報を参照したいときに必要です。
ですので、場合によっては、必要としない処理もあり得ます。
例えば、マウストレーサーみたいなものを実装しようとすると、「マウスの位置」が必要でしょうし、矢印キー入力で何かを動かしたいなら、「押されたキーの種類」が必要になることでしょう。

この回答へのお礼

有難うございます。
分かりそうな気がするのですが、落とし込めずに悩んでおります…。

もし可能でありましたら、再度アドバイスをお願いいたします。
イベントいうものが良く理解できていないのが原因なのですが、ここでいうeventとは何に対してのeventなのでしょうか？

addEventlistnerに対してのevent？または、clickに対してのevent？？
clickに対してのeventだと思うのですが、そうするとclickというイベントの中にpreventDefalut();というものが存在しているのでしょうか？

以下の定義だと少しだけ理解が進んだ気がします。

window.addEventListener('keydown', function(e) {
console.log(e.keyCode);
});

この場合は、keydownというイベントの中に、色々な機能があって、それをeで取得をしている。
その中の1つとして、eで取得した、keyCodeという押したキーが特定できるイベント？を取得している理解なのでしょうか？

keydownがさらに細かなものを取得したりするためにkeydownの中のkeyCodeなどをeで受け取っている感じなのでしょうか？

話は戻るのですが、最初にご質問させて頂きました
event.preventDefalut();　のpreventDefalut();はどれの中に入っているものなのでしょうか？

また、これらのeventを一覧で確認する方法などありますでしょうか？
宜しくお願いいたします。㎜

お礼日時：2021/05/30 18:44