Question

我继承了一些引发一系列事件的JS（我无法改变）：

jQuery(document).trigger('section:' + section);
// where "section" changes dynamically

我想观察所有这些事件，并解析section的值，并根据其内容做一些不同的事情。

如果没有改变我可以这样做：

jQuery(document).on('section:top', doStuff );

但是，如果我只知道该事件名称的第一部分，我该如何观察事件？

Answer 1

不幸的是，您无法以$().on('section:*')的风格收听所有活动。如果您可以更改代码，我会执行以下操作：

jQuery(document).trigger({
    type: 'section',
    section: section
});

然后你听它而不需要解析任何东西

jQuery(document).on('section', function(e){
    if (e.section === 'top') {
        // Something happened to the top section
    }
 });

如果您想最小化代码更改，请将旧事件保留在那里，这样现有代码就不会受到影响。

另一种方法是使用事件命名空间。

jQuery(document).trigger('section.' + section);

jQuery(document).on('section', function(e){
    if (e.namespace === 'top') {
        // Something happened to the top section
    }
});

但是，我更喜欢第一种方法，因为事件命名空间最常用于不同的目的：能够删除事件而不必强制保留对处理程序本身的引用。请参阅http://css-tricks.com/namespaced-events-jquery/和http://ejohn.org/apps/workshop/adv-talk/#13。我喜欢使用其他开发人员习惯的样式，如果他们做的话。

Answer 2

我真的不确定您的用例，但您可以覆盖$.fn.trigger方法：

(function ($) {
    var oldTrigger = $.fn.trigger;
    $.fn.trigger = function () {
        if (arguments[0].match(/^section:/)) {
            doStuff(arguments[0].split(':')[1]);
        }
        return oldTrigger.apply(this, arguments);
    };
})(jQuery);
var section = "top";
jQuery(document).trigger('section:' + section);

function doStuff(section) {
    alert(section);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

Answer 3

这是我最终做的事情。

这是胡安门德斯解决方案的组合，并使用method from the prototype library

最初，有一个运行此代码的函数：

myObject.adjustSection(section) {
    jQuery(document).trigger('section:' + section);
}
// I couldn't edit this function

所以我使用原型＆{39} wrap方法扩展了函数，因为我的项目使用了原型和jQuery。

// My custom function wrapper
// extend adjustSection to include new event trigger
myObject.prototype.adjustSection = myObject.prototype.adjustSection.wrap(
    function(parentFunction, section) {
        // call original function
        parentFunction(section);
        // fire event w/section info
        jQuery(document).trigger({
            type: 'adjustSection',
            section: section
        });
    }
);

然后，它运行原始的，但也会触发包含部分信息的自定义事件。

现在，我可以这样做来观察该事件并获得部分类型：

jQuery(document).on('adjustSection', function(event) {
    event.section; // contains the section I need
});

当然，这意味着我必须在同一范围内使用原型和jquery，这不是世界上最好的东西。但它奏效了。

当你只知道事件名称的PART时，观察JS事件？

3 个答案: