jquery - jQuery: 名前空間イベントのバインド

Question

イベントが名前空間の場合、1 つの基本イベントのすべてのイベントをリッスンできますか?

例：

$elmt.bind("change", function (event) {
    console.log(event);
});
$elmt.trigger("change.namespace1");
$elmt.trigger("change.namespace2");

これは、完全なイベント名にバインドする場合にのみ機能しますが、これはこの位置でわかりません:(

Answer 1

Bindからカスタムjqueryイベントのすべての名前空間へのクロスポスト

---

triggerAll代わりに試してくださいtrigger：

(function($) {
    $.fn.triggerAll = function(topics, data, delimiter) {
        return this.each(function() {
            var $this = $(this), chain = [], t = '';
            delimiter = (delimiter || '.');
            // rebuild chain
            $.each(topics.split(delimiter), function(i,n) {
                t += (i == 0 ? '' : delimiter) + n;
                chain.push(t);
            });

            // append/prepend original topic?
            data = (data || []);
            data.push(topics);
            $.each(chain, function(i,t) {
                $this.trigger(t, data);
            });
        });
    };
})(jQuery);

確かに、jQueryが名前空間のトリガーを処理する方法により、「root」イベントをトリガーすると、実際には名前空間バージョンが起動されます。したがって、期待どおりの文字を取得するには、のような区切り文字に別の文字を使用して、次のよう/にイベントを宣言する必要があります。

var $o = $('#whatever');
// this will be triggered for all events starting with 'root'
$o.on('root', function () { console.log(Array.prototype.slice.call(arguments, 0)); });
// some arbitrary way to fire custom events
$o.on('click', function () {
    $o.triggerAll('root/custom1/subA', ['1st', '2nd'], '/');
    $o.triggerAll('root/custom2', [3, 4, 5], '/');
});

Answer 2

できますが、完璧ではありません。

例えば：

function eventHandler(event){
    $("#output").html($("#output").html() + "<br />" + event);
}

$elmt = $("#elmt");
$elmt.bind("change.namespace1", eventHandler);
$elmt.bind("change.namespace2", eventHandler);

$elmt.trigger("change.namespace1");
$elmt.trigger("change.namespace2");

JSFiddle はこちらです。

ただし、基本的な「変更」イベントに対して両方の名前空間が発生するため、イベントから名前空間を抽出してオンにする必要があります。これは、「のみ」の名前空間を使用するか、名前空間を使用する必要がないことを意味します。

これが少し役立つことを願っています。

Answer 3

これは、各 li 要素の既存のテーマを比較し、新しいカスタム テーマに置き換えるために使用したものです.....

$('li').each(function(index) {
                  var oT = $(this).attr('data-theme');
                  var li_item = $(this).attr(index);

                    $('#li_item ').mousedown(function() {

                        if(oT=='a')
                         {
                           $(this).removeClass('ui-btn-up-' + a').addClass('ui-btn-up-' + 'c').attr('data-theme', 'c');
                         }  

                    });

                    $('#li_item ').mouseup(function() {


                        if(oT=='c')
                         {
                           $(this).removeClass('ui-btn-up-' + 'c').addClass('ui-btn-up-' + 'a').attr('data-theme', 'a');
                         }   

                    });

});