「脱jQuery」 生JSで.one()のように1度だけイベントを実行する

jQueryにはイベントを 一度だけ 実行できる one() という関数があります。生JSではどのように書くことができるのか紹介します。

jQuery


$('.selector').one('click', function() {
  
});

生JS


function one(node, event, callback) {
  var handler = function(e) {
    callback.call(this, e);
    node.removeEventListener(event, handler);
  };
  node.addEventListener(event, handler);
}

こんな関数を用意します。1度呼び出されたら、 removeEventListener() ですぐ解除しています。


one(document.querySelector('.selector'), 'click', function(event) {

});

jQueryと同じように使うことができます。