JSのaddEventListenerの使い方 – javascript
Angularで自作jsをangular.jsonに読み込んでそれをディレクティブで使っていた時のディレクティブのテストコードを書いていて詰まってしまったので、addEventListenerの使い方をおさらいします。
書き方は以下のように書きます。
EventTarget.addEventListener(イベントタイプ, 関数, オプション);
第一引数のイベントタイプは’click’だったり、’dblclick’だったり’mouseup’だったりします。
第二引数の関数はイベントが発生したときに実行したい関数を実装します。
第三引数のオプションはデフォルトがfalseです。キャプチャリングフェーズもしくはバブリングフェーズのどちらで実行するかをtrue/falseで指定します。キャプチャリングフェーズで実行したい場合はtrueにする必要があります。
EventTargetは例えば以下などです。
const input: HTMLInputElement = <HTMLInputElement>document.createElement('input');
addEventListenerを使えば、指定したDOMのイベントを監視することができます。
HTML内に<div id='id' onclick="alert('あいうえお');>と書いたりしますが、これとほぼ一緒です。
以下、簡単な実装例です。
const button:HTMLButtonElement = <HTMLButtonElement>document.createElement('button');
button.className = 'btn-cls';
button.textContent = 'ボタン';
button.name = 'btn';
const input: HTMLInputElement = <HTMLInputElement>document.createElement('input');
input.className = 'inp-cls';
input.value = '';
input.name = 'inp';
const myEvent = function(event){
console.log(event.target.name);
input.value = event.target.name;
}
button.addEventListener('click', myEvent, false);
document.body.appendChild(button);
document.body.appendChild(input);
これを実行すると以下のようにボタンをクリックすると、input要素に値が入ります。
onclickよりaddEventListenerを使うのか
結局のところ、’click’だったらonclickでコードしている関数を実行しているのとほぼ変わりありません。addEventListenerのメリットは一つのイベント（例えば’click’）に複数イベントリスナーを登録することができます。
IE9より前のInternet ExplorerではattachEvent()メソッドを使用しますが、このメソッドは忘れましょう。
第三引数のtrue/falseについて
正直知らなくて良いとおもいます。そんなにイベントリスナー多用することが考えられないです。でも知りたければ参考サイトを見てください。
KHI入社して退社。今はCONFRAGEで正社員です。関西で140-170/80～120万から受け付けております^^
得意技はJS(ES20xx),Java,AWSの大体のリソースです
コメントはやさしくお願いいたします^^
座右の銘は、「狭き門より入れ」「願わくは、我に七難八苦を与えたまえ」です^^
コメント