addEventListenerで登録したイベントを1回だけ発火させて削除する

上記の言い方であってるかわかりませんが一回だけイベント動いて欲しい時ありますよね、スクロールで任意の位置になったときに要素動かしたりとかボタンクリックしたら一回だけ発動したいとか。

jQueryだと.oneが便利でしたがjavascriptだとどうやって書くんやと思った次第です。

まず、addEventListenerにオプションが用意されています。

once: listener が追加後にたかだか1回しか実行されないことを Boolean 値で指定します。true を指定すると、listener は一度実行された時に自動的に削除されます。

https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener

window.addEventListener('click', function () {
  // hogehoge
}, {
  once: true
})

こんな感じです。短くかけるのがとても良いのですがIEが対応していません・・・

下記が対応版。

window.addEventListener('click', function clickEvent(event) {
  //hogehoge
  event.currentTarget.removeEventListener(event.type, clickEvent);
});

See the Pen once addEventListener by kisjam (@kisjam) on CodePen.

 

Leave a comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です