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

こんにちは、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 - おわりに

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