JavaScript イベントリスナー

未だに調べ物をしていると`onclick = function(){〜}`とかを見ますけど、そろそろやめましょう。もう2019年ですよ... また、この様な記法を初心者に教えている本や人が居るから困る... ## これからのイベント定義方法 これからはイベントリスナー(EventListener)と言う物を使ってイベントを定義します。以下がサンプルです。 ### 従来のイベント ``` // JavaScriptの場合 オブジェクト.onclick = function(){ //body } オブジェクト.onclick = 関数; // HTMLの場合 <button onclick="関数名()">クリック</button> ``` JavaScriptの場合、オブジェクトのプロパティに関数を代入させています。これでも確かにイベントを発火させる事は出来ますが、スマートではありません。HTMLに関しては凶悪です。JavaScriptで完結出来るイベント定義を要素からセットしているのですから。 ### こからの主流 ``` オブジェクト.addEventListener('click', 関数, false); ``` とてもシンプルですね。オブジェクトのaddEventListenerと言うメソッドを使ってイベントが発火した時関数を指定出来ます。 ## addEventListenerメソッド ### addEventListener(イベント, 関数, キャプチャ) - [String イベント] : 対象とするイベントの種類('click' 'load'等)を文字列で指定します。 - [Function 関数] : イベントが発火した際に実行する関数を指定します。 - [Bool キャプチャ] : イベント駆動方式を指定します。基本的に`false`で問題ありません。また省略可能です。 ### ページの読み込みが終わった場合のイベント ``` window.addEventListener('load', function(){ console.log("読み込み完了"); }); ``` ウィンドウオブジェクトのイベントリスナーを使用してページ読み込み完了後に発火されるイベントを定義しています。このイベントが発火される事で全てのDOM操作が可能になります。 ### ボタンのクリックイベント ``` let element = document.getElementById("button"); element.addEventListener('click', ()=>{ alert("click!"); }); ``` これはラムダ式を使ったコールバック関数の記法です。 ### オブジェクト・クラス内のでイベントリスナー ``` class MyClass{ constructor(element){ this._publicElement = element; element.addEventListener('click', this.clickEvent_Button); } clickEvent_Button(){ console.log(this._publicElement); } } ``` このプログラムでは期待する結果が得られません。 イベントリスナーのコールバックに`this.clickEvent_Button`メソッドを指定しており、メソッド内から`this._publicElement`を参照しようとしているプログラムです。 このプログラムでは`this.clickEvent_Button`をイベントリスナーにコピーしている状況です。イベントリスナーはその要素のプロパティの一部なので要素の`this`に置き換わり、`this._publicElement`が存在しない事になります。 問題を解決するには`.bind()`を使います。 ``` class MyClass{ constructor(element){ this._publicElement = element; element.addEventListener('click', this.clickEvent_Button.bind(this)); } clickEvent_Button(){ console.log(this._publicElement); } } ``` これで`clickEvent_Button`内のthisが参照するのはMyClassの物となります。