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

More than 3 years have passed since last update.

posted at

updated at

Organization

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で設定されたクリックイベントなどを定義している場所を調べる方法という記事も書いているので、そちらも良ければ見てみてください。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
105
Help us understand the problem. What are the problem?