来自多个侦听器的插件的 jQuery 调度事件答案

【问题标题】：jQuery dispatch event from a plugin for multiple listeners来自多个侦听器的插件的 jQuery 调度事件
【发布时间】：2009-10-04 23:22:12
【问题描述】：

我正在寻找一种从我的 jQuery 插件中分派事件的方法，以便它可以为该事件提供多个侦听器。我有插件设置，以便它返回对自身的引用，以便我以后可以通过公共方法添加侦听器。

到目前为止，我看到的唯一示例只有一个事件处理程序，例如：

$.fn.foo = function( options ) {
    ...
    // trigger event
    options.eventHandler();
}

$('#bar').foo({ eventHandler: myEventHandler })

我要做的唯一选择是，只需拥有一组已注册的事件处理程序并调用它们中的每一个，还是我错过了更好的选择。

【问题讨论】：

好奇：你为什么要为一个事件添加多个监听器？
因为当事件发生时我希望多件事情发生，这是基于事件的编程的核心优势之一。例如，我可以向点击事件添加任意数量的侦听器，它们都会根据该事件做自己的事情。
有道理。我已经添加了一个答案。只是为了结束循环。

标签： jquery events plugins listener dispatch

【解决方案1】：

我会在构造函数/选项对象中抛出一个数组。这是通常的做法：

$("").plugIn(
{
    prop: "value",
    foo: "bar",
    eventsToFire: [
        function () { },
        function () { },
        function () { }
    ]
});

插件会按照以下方式做一些事情：

假设您正在编写一个应该在集合上执行的插件。

jQuery.fn.plugIn = function (options)
{
    return this.each(function ()
    {
        var i = options.eventsToFire.length;

        while (i--) options.eventsToFire[i]();
    });
};

【讨论】：

您可以通过在开始时递减来缩短 while 语句 while ( i--; ) { }
是的，这和我想的差不多。唯一的区别是我在插件上有一个 registerEventHandler 方法，所以我可以稍后添加事件处理程序。

【解决方案2】：

为什么不使用数组并循环遍历它呢？下面的代码将接受数组和单个事件处理程序。

$.fn.foo = function( options ) {
    ...
    // trigger event
    if(typeof eventHandler == "Array"){
      for(var i=0; i<eventHandler.length; i++){
        options.eventHandler[i]();
      }
    }else{
      options.eventHandler();
    }
}

$('#bar').foo({ eventHandler: [myEventHandler, anotherEventHandler] })

【讨论】：

是的，这就是我的想法（虽然会有一个 registerEventHandler 方法，所以我可以稍后注册处理程序）但我想知道是否有更好的（或者我应该说 jQuery 的标准/核心）替代方案.