Posted at

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 - おわりに

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