Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
100
Help us understand the problem. What is going on with this article?
@zaru

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

More than 3 years have passed since last update.

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

100
Help us understand the problem. What is going on with this article?
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
zaru
basicinc
マーケティングとテクノロジーで社会のあらゆる問題を解決する集団

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
100
Help us understand the problem. What is going on with this article?