Question

我制作了一个jQuery插件，在定时事件中调用它的函数。我希望为那些使用插件的人提供在调用这些函数时监听这些函数的功能，并添加在触发函数时执行的代码。

这可能是一个简单的问题，但我无法绕过它。实现这一目标的最佳方法是什么？我只能找到有关事件绑定处理程序的信息，而不是事件事件。我想要类似下面的代码：

  $( "body" ).bind( "pluginInstance.functionName", function() {
    console.log( "triggered" );
  });

Answer 1

您可以调用传递给插件的声明函数。例如：

$.fn.myPlugin = function(callback){
   callback();
}


$('elem').myPlugin(function(){

    console.log("triggered");

})

如果你想对它更复杂一点，你可以将回调函数设置为一个对象，并引用对象与参数，这更具体，更容易阅读：

$.fn.myPlugin = function(options){
   options.callback();
}


$('elem').myPlugin(
   var options = {
      callback: function(){
         console.log('triggered')
      }
   }
)

Answer 2

我会允许插件使用者使用您预先确定的可选事件方法/属性将options哈希传递给插件的构造函数。我也有一个＆＃39;默认＆＃39;插件中定义的对象，用于定义用户可以覆盖的可用属性和事件。您可以使用jQuery extend方法复制用户未在构造函数中传递的任何默认值。

例如，您可能会遇到“滑行”问题。用户可以在插件中添加回调的事件。我会将插件设置如下：

$.fn.newPlugin = function(options){
   var defaults = {
        onSlide: null,
        onRightClick: null
   };
   var settings = $.extend(defaults, options);
   //Pretend something in your plugin happens and you want to optionally 
   //invoke the user's passed in onSlide method if they set it
   if(settings.onSlide != null){
       settings.onSlide();
   }
}

当用户使用您的插件时，他们可以通过“滑动”＆＃39;处理程序进入构造函数：

$('elem').newPlugin({
    onSlide: function(){
        alert('slide event triggered');
    }
});

Answer 3

您可以使用自定义活动http://css-tricks.com/custom-events-are-pretty-cool/。请参阅http://jsfiddle.net/3L45H/1和https://learn.jquery.com/plugins/basic-plugin-creation/

从您的插件中，您可以调用以下内容来触发事件

$(this.element).trigger('pluginInstance.functionName');

在进行任何其他DOM事件时听取它

$('body').bind( "pluginInstance.functionName", function() {
    console.log( "triggered" );
});

$('body').myPlugin();

绑定/收听事件

3 个答案: