😸

JavaScriptのイベントオブジェクト(ハンドラー？)について

2024/03/13に公開

JavaScript

CSS 3

HTML 5

tech

よくJavaScriptを勉強していて気になっていたのが、引数に(e)や(event)と記述してイベント処理を行うあれです。
document.addEventListener('click', function () {
    let hoge = function(e) {
        e.preventDefault();
    }
});
//とか
document.addEventListener('click', function () {
    let hoge = function(event) {
        event.target.style.fontSize = '16px';
    }
});
//みたいな
この引数はいったいなんぞや？と初心者の自分は思っていたわけです。

 本題まず確認するべきページはみんな大好きMDNですね。

https://developer.mozilla.org/ja/docs/Web/API/Event
多くの DOM 要素は、これらのイベントを受け入れる（または「待ち受けする」）ように設定することができ、それに応じてコードを実行してイベントを処理する（または「取り扱う」）ことができます。イベントハンドラーはふつう、様々な HTML 要素（<button>, <div>, <span>, など）に EventTarget.addEventListener() を使用して結び付けられ（または「装着され」）、これが一般に古い HTML のイベントハンドラー属性を使用する方法を置き換えています。
こんなわかりやすい書き方でも頭の悪い自分はいったん自分なりの言葉で言語化しないと頭に入らないので要約してみます。
ほとんどのDOM上の要素はaddEventListenerやEventTarget.dispatchEvent()※詳しくは知らないなどのイベントを受け入れてくれる。またこのイベントの処理を受け入れるようにするためにはaddEventListenerを使用して要素とイベントを結びつける必要がある。たぶん昔よく使用されていたとされるイベントの属性(onclickとかonmouseoverとか？)の処理を今風に置き換えている的な。
いやー実に頭の悪い物の捉え方ですね。自分でも惚れ惚れします。
で、結局どういうことなんだってばよ

って感じなんですが、おそらくaddEventListenerを使用した時点でイベントで使用する関数に対してイベントオブジェクトが付与されるイメージかな？違ってたらすみません。それによってイベントオブジェクトの数あるメソッドとプロパティが使えるようになるのだと思います。またイベントで使う引数の文字に関しては正直なんでも良く(e)(event)が多く使われているイメージがあります。

本題

Discussion