0
Help us understand the problem. What are the problem?

posted at

addEventListener()メソッドについて詳しく記載

イベント発生時の関数を指定したいとき

addEventListener()メソッドは、特定のイベントが配信されるたびに呼び出される関数を設定します。

構文

イベントターゲット.addEventListener(イベント, リスナー, [オプション*省略可])

アロー関数を使う方法

アロー関数の利点はthisを固定できるというところです。

//要素の参照を取得する
const button = document.querySelector('.button');

//アロー関数を使う方法
button.addEventListener('click', () => {
  console.log('ボタンがクリックされました');
});

function宣言を使う方法

//要素の参照を取得する
const button = document.querySelector('.button');

//function宣言を使う方法
button.addEventListener('click', function() {
  console.log('ボタンがクリックされました');
});

イベントリスナーを一度だけ呼び出したい

イベントリスナーの設定時、addEventListener()メソッドの第三引数を使ってオプションを設定できます。
すべてのオプションは設定する必要はなく、必要なオプションだけを設定します。

オプション

capture・・・キャプチャーフェーズで取得するか(型: 真偽値)
※captureとは?
理論値で、この型のイベントがDOMツリーで下に位置するEventTargetに配信される前に、登録されたListenerに配信されることを示す。
once・・・リスナーの呼び出しを一回のみにするか (型: 真偽値)
passive・・・パッシブイベントか(型: 真偽値)

//オプションを設定
const option = {
  once: true;
};

document.querySelector('.button')
.addEventListener('click', onClickButton, option);

function onClickButton() {
  alert('ボタンが押されました');
}

設定したイベントリスナーを削除したい

構文

イベントターゲット.removeElementListener(イベント名, リスナー, [オプション*省略可])
const box = document.querySelector('.box'/*イベントターゲット*/);
box.addEventListener('click', onClickButtoon/*リスナー*/);

//3秒後にリスナー関数を削除する
setTimeout(() => {
  box.removeEventListener('clock', onClickButton);
}, 3000);

function onClickButton(){
  alert('boxがクリックされました');
}

removeEventListener()メソッドを使う場合は次のことに注意する。
・関数名を指定する。(アロー関数は不可)
・addEventListener()メソッドの引数と(オプション含めて)同じ引数を指定する。

Register as a new user and use Qiita more conveniently

  1. You can follow users and tags
  2. you can stock useful information
  3. You can make editorial suggestions for articles
What you can do with signing up
0
Help us understand the problem. What are the problem?