JSのaddEventListenerの使い方 | 株式会社CONFRAGE ITソリューション事業部

JSのaddEventListenerの使い方 – javascript
1. 関連

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要素に値が入ります。