如何在jQuery插件中使用事件和事件处理程序？

我triyng构建一个简单的动画jQuery插件。主要想法是采取一个元素并以某种方式在固定的间隔中反复操作，这将是动画的fps。如何在jQuery插件中使用事件和事件处理程序？

我想通过活动来完成这件事。而不是像for（）或while（）那样使用循环，我想通过触发事件来重复某些操作。这个背后的想法：我最终希望能够对某些事件调用多个动作，例如当第一个动画完成时启动第二个动画，或者当某个动画序列位于特定帧上时启动它。

现在我尝试以下（插件的非常简化的版本）：

(function($) { 
    $.fn.animation = function() { 
     obj = this; 
     pause = 1000/12; //-> 12fps 

     function setup(o) { 
      o.doSomething().trigger('allSetUp'); 
     } 

     function doStep(o, dt) { 
      o.doSomething().delay(dt).trigger('stepDone'); 
     } 

     function sequenceFinished(o) { 
      o.trigger('startOver'); 
     } 

     function checkProgress(o) { 
      o.on({ 
       'allSetup': function(event) { 
        console.log(event); //check event 
        doStep(o, pause); 
       }, 
       'stepDone': function(event) { 
        console.log(event); //check event 
        doStep(o, pause); 
       }, 
       'startOver': function(event) { 
        console.log(event); //check event 
        resetAll(o); 
       } 
      }); 
     } 

     function resetAll(o) { 
      /*<- 
       reset stuff here 
      ->*/ 
      //then start over again 
      setup(o); 
     } 

     return this.each(function() { 
      setup(obj); 
      checkProgress(obj); 
     }); 
    }; 

})(jQuery);

然后调用动画这样的：

$(document).ready(function() { 
    $('#object').animation(); 
});

然后 - 什么也没有发生。没有事件被解雇。我的问题：为什么？是不是可以在jQuery插件中使用这样的事件？我需要在$（document）.ready（）中触发它们'manualy'（我不喜欢它），因为它是一个完全不同的东西 - 从插件外部控制动画，而是使用事件在插件内部在插件内部具有一定程度的“自我控制”）。我觉得我错过了一些有关自定义事件的基本知识（注意：我对此仍然很陌生）以及如何使用它们......

Thx for any help。

SOLUTION：

事件处理和实际触发的作品，我只好打电话给checkProgress功能第一：

而不是

return this.each(function() { 
    setup(obj); 
    checkProgress(obj); 
});

我不得不这样做：

return this.each(function() { 
    checkProgress(obj); 
    setup(obj); 
});

因此事件监听功能有任何事件被触发之前调用，当然是什么让完美的意义......

来源

2012-09-26 TimG

创建了新的事件，但我没有看到的事件时，他们应该被解雇。使用点击左右，并在其身体火你自定义事件 –

你的代码只声明，但如何和何时应该被解雇？而且你可以在任何脚本中使用触发器，它不会在widget上消失。 Widget也是js）））） –

嗯，也许这是我不了解事件的正确的事情，但我认为事件将通过触发（）开始通过调用setup（）返回这个函数。每（）。 – TimG

您需要在DOM模型设置的事件，例如：

$('#foo').bind('custom', function(event, param1, param2) { 
    alert('My trigger') 

}); 

$('#foo').on('click', function(){ $(this).trigger('custom');});

您DOM元素应该知道他何时应该触发你的触发器。

请注意，在你的插件，你不调用任何内部函数 - ONLY DECLARATION

来源

2012-09-26 09:13:22

因此，通过函数触发事件不起作用？因为这就是我想要做的......我不希望任何鼠标或键盘事件触发我的事件......当你看我的代码时：我首先声明了函数setup（），其中事件' allSetup'在函数结束时被触发。该函数在插件的返回中调用this.each（）函数，在$（document）.ready（）函数中使用我的dom元素上的插件时调用该函数。在我的理解中，当dom准备好并且插件用于dom元素时，'allSetup'应该被解雇... – TimG

或换句话说，您的示例也应该像$（'＃foo'）一样工作doSomejQueryStuffHere（）。trigger （ '自定义'）;或者我错了？ – TimG

是的，它工作，如果doSomejQueryStuffHere（）重演这一点。 –

如何在jQuery插件中使用事件和事件处理程序？

回答

相关问题