JavaScriptやjQueryでイベントを削除して再登録する方法

よくあるケースではないですが…JavaScriptやjQueryで設定したイベントハンドラを一時的に無効にして、もろもろの処理をした後に再びイベントを復活させたかったので、やり方を備忘録的に残しておきます。

取得して削除して再登録する

アプローチは単純で、登録済みのイベントを「取得」→「削除」→「再登録」これだけです。

まず、設定済みのイベントハンドラを取得する必要があります。というかイベントハンドラの取得さえできてしまえばできたも同然です。イベントハンドラは、JavaScriptやjQueryの場合、一般的には下記のパターンがあると思います。そして、それぞれに対して取得方法が変わってきます。

onclick属性で指定

<button id="hoge" onclick="doSomething();">click me</button>

取得＆削除＆再登録

// 取得
var event = $("#hoge").get(0).onclick;
// もしくは
// document.getElementById("hoge").onclick

// 削除
$("#hoge").get(0).onclick = "";

// 再登録
$("#hoge").get(0).onclick = event;

jQueryでDOMにクリックイベント

$("#hoge").click(function() {
    doSomething();
}); 

$("#hoge").on("click", function() {
    doSomething();
});

取得＆削除＆再登録

// 取得
var events = [];
Object.keys($._data($("#hoge").get(0), "events")).forEach(function(k) {
  events[k].forEach(function(o) {
    events.push(o.handler);
  });
});

// 削除
$("#hoge").off("click");

// 再登録
events.forEach(function(e) {
  $("#hoge").on("click", e);
});

jQueryのon()でdocumentにクリックイベント

$(document).on("click", "#hoge", function() {
    doSomething();
});

取得＆削除＆再登録

// 取得
var events = [];
Object.keys($._data($(document).get(0), "events")).forEach(function(k) {
  events[k].forEach(function(o) {
    events.push({
      handler: o.handler,
      selector: o.selector,
    });
  });
});

// 削除
$(document).off("click", "#hoge");

// 再登録
events.forEach(function(e) {
  $(document).on("click", e.selector, e.handler);
});

addEventListenerを直接使う

var event = function(){
    doSomething();
};
document.getElementById("hoge").addEventListener("click", event);

削除＆再登録をする

残念ながら addEventListener で直接設定した場合、後からイベントハンドラを取得することはできないようです（出来る場合は教えてください 🙇🏻）。ただし、設定時にイベントを変数にとっておくことで、削除と復活自体は可能です。

// 削除
document.getElementById("hoge").removeEventListener("click", event);

// 再登録
document.getElementById("hoge").addEventListener("click", event);

ちなみに以前、jQueryで設定されたクリックイベントなどを定義している場所を調べる方法という記事も書いているので、そちらも良ければ見てみてください。