イベント
EventTarget#addEventListener
EventTarget#addEventListener
は特定のイベントが起きた時に、それに連動する形である処理を実行したい時に使います。よくあるのが要素をクリックしたら「ほげほげ」するというような処理です。それはこのように書かれます。
document.getElementById('button').addEventListener(
'click',
() => {
console.log('clicked');
}
);
1番目がイベントの名前、そして2番目に連動して実行したい処理(関数)です。ちなみに、addEventListener
には3番目の引数も設定できます。これは仮引数false
が渡っているのでデフォルトでは有効ではない形でイベントが設定されます。
3番目の引数はuseCapture
と書かれたりしていて、子要素で同名のイベントが起きた時に親から連動処理を実行するかを定めるものです。例を用意しました。
外の四角はクリックすると「outer click」、中の四角はクリックで「inner click」とログするようになっています。そして外の四角のイベントはuseCapture
をtrue
に設定しています。この状態で中の四角をクリックするとどうなるかというと、「outer click」から「inner click」の順番で呼ばれます。親の四角のイベントでuseCapture
をfalse
としているとこれは逆になります。
EventTarget#removeEventListener
EventTarget#removeEventListener
はaddEventListener
で設定した連動処理を解除するのに使います。気を付けることは、例えば上記の「clicked」とログするイベントを解除したい時に、
document.getElementById('button').removeEventListener(
'click',
() => {
console.log('clicked');
}
);
と書いても効かないということです。実は2番目の引数のハンドラーは同じものである必要があります。上記では、その場で定義した(ただし処理は同じんな)新しい関数を渡してしまっているので解除されません。
これを修正するにはハンドラーをちゃんと安定した場所に定義します。
const onClick = () => {
console.log('clicked');
};
そしてaddEventListener
, removeEventListener
で使えば大丈夫です。
const button = document.getElementById('button');
button.addEventListener('click', onClick);
button.removeEventListener('click', onClick);