JavaScriptの常識シリーズ④。
addEventListenerです。
「何かをしたときに何かを起こす」ということはわかると思います。
では
document.querySelector("form").addEventListener("submit", e => { e.preventDefault(); });
というような場合。
addEventListenerの引数は何を表しているのか、とかパッと答えられるか、自分で書くことができるかといえば、残念ながら私の場合はNoです。
なのでしょうがないので勉強します。
まず復習というか前提。
documentとは
document
ってのは、HTMLを操作するときに使うオブジェクトです。
で、
document.querySelector("form")
で、HTMLのformというタグを指定しています。
この指定はHTMLタグをそのままできますし、HTMLを書いたときに自分で付けたID、クラスなどの属性、つまり属性セレクターでもできます。
formはHTMLで<form>タグがあり、それを取り出しています。
つまりここではaddEventListenerは、ユーザーがform内で何かをしたらHTMLを操作するということになります。
addEventListenerとは
ここでやっと本題に入るわけですが、それにしてもこのaddEventListenerという名前・・・。
いったいなんなんですかね。
「追加イベント聞き手」？
なにそれ？
というわけで分解して考えていきます。
多分こんな言葉にひっかかって立ち止まってるの、私くらいじゃないでしょうか。
まず"Event Listener"ってのは「イベントリスナー」つまり「イベントの聞き手」ということになります。
で「聞き手って、誰が何を聞くのよ？」という話になるのですが、聞き手というのはプログラミング用語です。
ラジオのリスナーとかそういう直接的な意味じゃありません。
どっちかと言うと「待機役」「見張り役」みたいなイメージです。
でそれを「add（追加する）」ですから、「見張り役を追加する」という意味になります。
見張り役が何かを見たら行動を開始するというイメージです。
敵が攻めてきたら鐘を鳴らす、みたいな。
さて、ここまでわかったらあとはaddEventListenerの引数です。
addEventListenerの引数
addEventListenerの引数は基本二つです。
（三つ目は略されることが多いです。）
第一引数は「何が起きたら反応するか」を示し、第二引数は「反応したら何をするか」を示します。
第一引数には"click" "submit" "input"などがあります。
それぞれ「クリックしたら」「送信したら」「フォームの入力欄に何かが入力されたら」を意味します。
それらのことが起こったら、第二引数が作動します。
作動ですので、第二引数はコールバック関数になります。
注意点としては、この関数がとるオブジェクト＝引数はイベントに関するもののみに限られます。
なのでそのまんまイベントオブジェクトと呼ばれます。
addEventListener("submit", function(e))と書いたとき、eはイベントオブジェクトです。
たとえば、上で書いた
e => { e.preventDefault(); }
では、eがイベントオブジェクトです。
addEventListenerの第二引数では基本的にアロー関数が使われます。
（ついでに）preventDefault()とは
preventDefault()はイベントオブジェクトのメソッドの一つで、「通常起こることをキャンセルする」という意味です。
「Prevent(邪魔をする) Default」と、デフォルトで起こることを邪魔をするという、まんまな名前ですので憶えやすいと思います。
普通、送信ボタンを押すと画面が更新されます。
これは「フォームの内容を送信しても、画面が更新するというデフォルトの動作をキャンセルする」という意味になります。
掲示板で送信するたびにいちいち更新してたのでは読み込みに時間がかかるので、このような措置を取ります。
画面全体を更新するのではなく、画面はそのままで入力フォームに書き込んだ内容を付け足すことで、書き込んだ内容を反映していくイメージです。
おわりに
さて、addEventListenerに関する理解はこれくらいでいいかと思います。
必要事項があれば、適宜追記していきます。
