jquery.customEventTrigger

 

domの変化などをイベントとして定義できるjQueryプラグイン「jquery.customEventTrigger」っていうのを作りました。setIntervalで状態変化を監視して、変化したら任意のイベントをトリガーするというものです。もっと他にやり方があるかもと思いつつも。

jQueryプラグインでは、利便性のためにコールバック関数をフックできる仕組みにしたりしますが、フックポイントが不足していることがよくあります。かといって、単機能のためにわざわざフックポイントを増やしたくない。そんな時に、本プラグインで独自のキッカケでトリガーするカスタムイベントを定義すればbindやliveやoneで処理できるという訳です。例えば、opacityが1になると発生するイベントを作ってfadeInのコールバック代わりに使ったり、あるクラス名を取得すると発生するイベントを作ったり。

なお、jquery.customEventTriggerはカプセル化のためにsub方式を採用してるので、$.customEventTrigger(selector).method()という使い方になります。

下記のようにshowイベントを定義しておくと、cssのdisplayがnoneから別の値に変わった瞬間にトリガーします。addGettingTrueEventメソッドは条件がfalseからtrueに遷移するのを捉えるのです。

$.customEventTrigger('div.foo').addGettingTrueEvent('show', function(obj) {
    return (obj.css('display') != 'none');
});

下記のように使います。

$('div.foo').bind('show', function() {});

下記のようにresizeXイベントを定義しておくと、Widthが変化した瞬間にトリガーします。addChangeEventメソッドは値の変化を捉えます。

$.customEventTrigger("div.foo").addChangeEvent('resizeX', function(obj){
    return obj.get(0).clientWidth;
});

下記のように使います。

$('div.foo').bind('resizeX', function() {});

もう少し複雑な例。addメソッドは汎用のジェネレータで、上記の2つのメソッドのバックエンドでもあります。第2引数の関数の戻り値を前回の値と比較して変化を捉えますが、比較の仕方を第3引数で指定できます。trueだったらトリガーします。

$.customEventTrigger("div.foo").add('resize',
    function(obj){
        return [obj.get(0).clientWidth, obj.get(0).clientHeight];
    },
    function(a, b){
        if (a !== undefined) {
            return a[0] !== b[0] || a[1] !== b[1];
        }
    }
);

下記のように使います。

$('div.foo').bind('resize', function() {});

addGettingTrueEvent(String eventName, Function newValue[, Int interval])

eventName 任意のイベント名
newValue 値を検出するロジックを関数で指定します。関数は引数としてjQueryオブジェクトを受け取ります。この戻り値がfalseからtrueに変わるとeventNameイベントがトリガーされます。
interval 内部でsetIntervalに渡される実行間隔をmsで指定します。デフォルトは1です。

 

addChangeEvent(String eventName, Function newValue[, Int interval])

eventName 任意のイベント名
newValue 値を検出するロジックを関数で指定します。関数は引数としてjQueryオブジェクトを受け取ります。この戻り値が前回から変化するとeventNameイベントがトリガーされます。
interval 内部でsetIntervalに渡される実行間隔をmsで指定します。デフォルトは1です。

   
add(String eventName, Function newValue, Function compare[, Int interval])

eventName 任意のイベント名
newValue 値を検出するロジックを関数で指定します。関数は引数としてjQueryオブジェクト受け取ります。この戻り値はcompareメソッドの引数として渡されます。
compare 前回の値と今回の値を比較するロジックを指定します。関数は引数として前回の値と今回の値を受け取ります。この戻り値がtrueのときeventNameイベントがトリガーされます。
interval 内部でsetIntervalに渡される実行間隔をmsで指定します。デフォルトは1です。

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です