〽️ イベントオブジェクトとは? 〽️ 何で元から入ってる? 〽️ 渡しているのはイベントリスナ。
JavaScriptコードの「?」をまとめたページはこちら⬆︎。
elm.addEventListener("click",function(「「1e」」) { });
こんにちは、「ふ」です。
JavaScriptコードの「これって何?」、今回はこちら⬇︎。
element.addEventListener("click",callback); function callback(「「1e」」) { }
element.addEventListener("click",function(「「1e」」) { });
JavaScriptのイベント処理を紹介しているサンプルコードにて。
イベント発生時の呼び出される関数に、引数「e」というものが入っているのを見かけます。そして関数内部で、「e」を使ってなにか処理をしている模様。
・この引数は何のため?
・何が入っているのか?
・何かが入っているとしたら、なぜ知らない間にその「何か」が入れられたのか?
初めて目にした方は「引数eの内容」以前に、「そもそも」レベルで不可解な事でしょう。
これは、イベントオブジェクトを受け取るための引数なんです。←と言ってもまだ「?」だと思います。
そこで今回の記事では引数eの出所、イベントオブジェクト、イベントリスナとイベントオブジェクトの関係について紹介していきます。
読み終えた頃にはサンプルコードに「e」が出てきても動じない精神力が備わっていることでしょう。じっくりと説明していきますので、ぜひご一読ください。
解らないときには先づ、console.logです。
引数eにはどのようなものが入っているのか?イベントリスナのサンプルを作って、実行してみましょう。
<button id = "btn1"> btn1 </button>
ボタンを1つ用意しました。
クリックイベントを実装して、出力してみましょう。
「「3//btn1を取得」」 const btn1 = document.getElementById("btn1"); 「「3//イベントハンドラを実装」」 btn1.addEventListener("click",output); 「「3//呼び出される関数」」 function output(「「1e」」) { console.log(「「1e」」); }
イベントリスナで呼び出す関数「output」に、引数eを入れてみました。関数の内容は「引数eをconsoleに出力する」というものです。
実装後ボタンをクリックすると、consoleに⬇︎のように出力されます。
▶︎ PointerEvent { isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, … }
出力されたもの。
これは、イベント発生時の情報がまとめられたイベントオブジェクトというものです。
イベントリスナで呼び出された関数の引数eには、「イベントオブジェクト」が入っている。
イベントオブジェクトの内容である「イベント発生時の情報」。
多岐に渡るのですが、いくつかあげてみます⬇︎。
・ target
イベントを発生させた要素。ここでは button#btn1。
・ type
発生したイベントのタイプ。ここでは click。
・ pointerType
クリックなどの場合、イベントを起こしたデバイスの種類(マウス、ペン、タッチなど)
その他にもクリック位置に関するものなど、イベントが発生したときの情報が色々と詰まっています。
引数eに入っているイベントオブジェクトの内容を利用してみましょう。
<button id = "btn2"> btn2 </button>
引数eに入っているイベントオブジェクトの内容を参照することによって、「ボタンをクリックしたのがマウスなのかタッチなのか表示する」というものを作ってみます。
const btn2 = document.getElementById("btn2"); let count = 1; 「「3//on/off用のカウンター変数」」 btn2.addEventListener("click",show_device); function show_device(「「1e」」) { if(count ===1) { bbe.target.innerText = 「「1e.pointerType」」; bbcount = 0; } else { bbe.target.innerText = "btn2"; bbcount = 1; }
クリックしたデバイスのタイプは、イベントオブジェクトのpointerTypeプロパティで参照することができます。pointerTypeの値は文字列(String)なので、そのままinnerTextに代入しました。
クリックしてみてください⬆︎。
このページをスマホでご覧であれば「touch」、PCのマウスでクリックしたなら「mouse」とテキストが変化します。
ボタンのCSSを変更するのであれば、getElement〜で取得した定数「btn2」を使えば済むことなのですが、いま参照したpointerTypeなどの情報は、定数「btn2」からはアクセスすることはできません。
イベントに関する内容を使って処理をしたいケースでは、引数eに入っているイベントオブジェクトにアクセスするのが便利です。
めでたしめでたし。
イベントオブジェクトが便利なのはわかったが、じゃあなんで元々引数eに入っているのだ?
そんな処理をした覚えはありません。
いつどこで、イベントオブジェクトと関数の引数がつながったのか?それがわからんちゅーに。
引数eにイベントオブジェクトを渡したのは、addEventListenerメソッドです。
さきほどのサンプルでもつかった、addEventListenerメソッド(イベントリスナ)。
このメソッドは、「イベント」と「発生時に呼び出す関数」を紐づけるものです。
しかし、イベントリスナはもう1つ、大きな役割を持っています。
イベントリスナはイベント発生時に関数を呼び出すとともに、その関数の第1引数に生成したイベントオブジェクトを渡す、という働きもしてしまうのです。
実際にサンプルをつかって、検証してみます。
function 「「4kensyou(e)」」 { console.log(e); }
何の紐付けもしていない関数「kensyou」を定義しました。
引数にはeを入れておき、eがconsole.logされるという処理にしています。
kensyou(e); ▶︎ ReferenceError: e is not defined
実行してみると、「eは定義されてないのですが?」とエラーになります。
当然ですよね。
<button id = "btn3"> btn3 </button>
それではbuttonを作り、イベントリスナで「kensyou」と紐づけてみましょう。
const btn3 = document.getElementById("btn3); btn3.「「1addEventListener」」("click",kensyou);
紐づけた上で、ボタンをクリックすると....
▶︎ PointerEvent { isTrusted: true, pointerId: 1, width: 1, height: 1, pressure: 0, … }
consoleにイベントオブジェクトが表示されました。
さっきは「e is not defined」となっていたのに、イベントリスナで紐づけるとちゃんと引数eにオブジェクトが渡されていることが分かります。
オブジェクトをわたしていたのはわたし。イベントリスナです。
そしてaddEventListenerの役割はあくまで「第1引数にイベントオブジェクトを渡す」というものなので、引数名が「e」である必要はありません。「f」でも「g」でも、もっと長い名前でもちゃんと動きます。
ただし慣例的に(他の人がコードをみても分かりやすいように)、「e」という引数名がよく使われているのです。
引数名を「e」とするのは、慣例的なもの。
呼び出される関数が、引数なしだとどーなるのでしょうか?
<btn id = "btn4"> btn4 </button>
またまたbuttonを作って試してみます。呼び出される関数は「nasi( )」とし、引数には何も入れずにしておきます。
const btn4 = document.getElementById("btn4"); btn4.addEventListener("click",nasi); function 「「4nasi()」」 { console.log(e); }
結果は予想がつきますが、クリックしても「e is not defined」とエラーがでます。
やはり何かしらの引数を入れておかないと、イベントオブジェクトを受け取ることはできない模様。
言い換えれば、「e」はイベントオブジェクトを受け取るために明記されているということですね!
イベントオブジェクトを受け取るために、引数eが明記されている。
・addEventListener(イベントリスナ)はイベントと関数を紐づけるとともに、イベントオブジェクトを生成する。
・イベントオブジェクトとは、イベント発生時の情報がまとめられたもの。
・生成されたオブジェクトは、イベント発生時に呼び出される関数の第1引数に渡される。
・関数にはオブジェクトを受け取るための第1引数を明記しておかなければならない。そのために記述してされているのが、引数「e」。
・引数名は任意ではあるが、「e」としたほうが分かりやすいので、慣例的に使われている。
これまで見てきたことをまとめると⬆︎のようになります。
引数「e」の正体は、「イベントリスナで生成されるイベントオブジェクトを受け取るために明記しているもの」だったのです。addEventListenerの役割を知らないまま、function(e)などと記述されているのを見ると、「?」となるのも無理はありません。
実を言うと、引数「e」がなくてもイベントリスナやイベントハンドラは、オブジェクトを関数に渡しているのです。
<button 「「4onclick = callback()」」></button>
これ⬆︎はHTMLタグに埋め込まれたイベントハンドラ。呼び出し先の関数に引数eを付けても反応してくれません。その際には、
function 「「4callback()」」 { console.log(「「1argument[0]」」); console.log(「「1event」」.target); }
その際には「augment[0]」や「event」オブジェクトで参照することができます。これはJavaScriptのaddEventListenerでも使うことができます。長くなるので詳しくはまた別の機会にお伝えしますが、現在では引数「e」を使う手法が一般的です。
最後までお読みくださり、ありがとうございます。
これからもJavaScriptのサンプルコードで「?」となりそうなものを調査し、記事にしていきたいと思います。ぜひ参考にして、学習に役立ててください。
あなた.addEventListener("この記事を読んだ" , function( ) {またお会いしましょう〜 ♪});
JavaScriptの点3つ「 ... 」 〜スプレッド構文(演算子)について。
2022.02.14
本質は「オブジェクトの複製」にあり。
JavaScript、乱数の範囲や重複を指定〜Math.random使い方。
2021.11.17
整数/範囲/重複の有無を自在にあやつろう。
JavaScriptの矢印「=>」〜これはアロー関数というものです。
2022.01.09
使い方とメリットについて解説。
ブログのクリックをGoogle Analyticsで計測。
2021.11.30
新たなツールは導入せずともOK。
swift、web、ガジェットなど。役立つ情報や観ていてたのしいページを書いていきたいと思います。