Help us understand the problem. What is going on with this article?

Check! jQuery ですでに登録されているイベントを取得し、割込ませたりするメモ

More than 3 years have passed since last update.

こんにちは、cloudpack@dz_ こと大平かづみです。

Prologue - はじめに

javascript, jQuery を使って作られた既存のイベント処理に対して、なんとかして追加の処理をかませたい!と必死に模索したメモです。

サンプル

サンプルとして、クリックイベントに処理を割り込ませるコードを書きました。なお、一例ですので、参考にする際は自己責任でお願いいたします。m(_ _)m

サンプルコード

サンプル.html
<form>
    <input type="text" id="message">
    <button id="submit">Show</button>
</form>
サンプル.js
$(function() {
  // 元のクリックイベントを設定する
  $('#submit').on('click', function() {
    alert('Message is ' + $('#message').val());
  });

  // クリックイベントに設定されたハンドラを取得する
  var events = $._data($('#submit').get(0), "events");
  var originalHandler = events.click[0].handler;

  // 元のクリックイベントを外す
  $('#submit').off('click', originalHandler);

  // クリックイベントに、別のハンドラを設定し、引数として元のハンドラを渡す
  $('#submit').on('click', {next: originalHandler}, function(event) {
    // 処理例: ダイアログの返り値によって、元のイベントを実行する
    if (confirm('This is INTERRUPT!\nRun next handler?')) {
        event.data.next();
        }
  });
})

解説

登録されているイベントハンドラを取得する

$._data(セレクタ, "events") でセレクタに設定されているイベントが取得できます。

イベントのハンドラ(関数)を取得するには、クリックイベントの場合は、上記の events.click[0].handler のように取得できます。また、他のイベント、例えばフォーカスイベントのハンドラを取得したい場合は、 events.focus[0].handler で取得できます。

イベントの付け外し

クリックイベントを外す場合は、 off('click', 外したいハンドラ関数) です。また、クリックイベントを設定する場合は、 on('click', 設定したいハンドラ関数) です。

元の関数も実行したい場合

.on(events [, selector ] [, data ], handler) の引数 data として配列を指定すると、イベントハンドラの関数の中で利用することができます。これを利用して、元の関数を渡して処理を引き継がせることもできました。

デモ

上記について、簡単なデモをこちらに用意しました。
http://codepen.io/dzeyelid/pres/bExomw

備考

  • on()/off()bind()/unbind() に入れ替えても動作します。jQuery 1.7 以降は on()/off() 、それ以前は bind()/unbind() を使うようです。

  • 上記の click は、 focus などの他のイベントでも同様に使えるようです。

Epilogue - おわりに

以上、ちょっとゴリ押しな処理かもしれませんが、ちょっとした機能追加や修正の際に役立つかもしれません。

dz_
Nice to meet you! :)
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