jquery - jQuery：绑定命名空间事件

Question

如果事件是命名空间，是否可以监听一个基本事件的所有事件？

例子：

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

这仅在我绑定到完整的事件名称时才有效，但这是我在这个位置上不知道的:(

Answer 1

你可以，但它并不完美。

例如：

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 2

从 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 如何处理触发命名空间，触发“根”事件实际上会触发命名空间版本，因此要获得您期望的内容，您需要使用另一个字符作为分隔符，例如/，然后声明您的事件，例如：

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 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');
                         }   

                    });

});