jquery事件處理如何使用

我正在使用來自jsmovie的插件。它有一個像jquery事件處理如何使用

$('.movie').jsMovie({ 
    images : ['loader_ani4x4.png'], 
    folder : 'pic/loader/', 
    height : 40, width: 40, 
    grid : {height:40, width:40, columns:4, rows:4}, 
    showPreLoader : false, 
    playOnLoad : true 
});

基本用法和像

* play - is triggered when the movie starts playing 
* pause - is triggered when the movie pauses 
* stop - is triggered when the movie stops 
* ended - is triggered when a clip played its last frame 
* playing - is triggered when the movie enters a frame 
* loaded - is triggered when the movie has finished its loading process 
* verbose - is triggered when the movie outputs a verbose, the callback has an extra argument like function(e,output){} which contains the text

事件如何使用打事件？

我試過這樣可是不行的

$('#movie').jsMovie.playing(function(v){ 
    console.log(); 
});

來源

2013-07-05 django

你有一個的jsfiddle或類似的，你可以展示的代碼？ –

Thouse是事件，而不是方法 –

那麼，電影是CLASS還是一個ID或兩者兼而有之？ –

試一下：

$('#movie').on('playing',function(){ /* your code */});

來源

2013-07-05 14:27:44

這個工作和上面一樣。謝謝。 – django

從我假設此庫射擊DOM對象上的事件字「觸發」。我不知道，但也許你可以這樣做：

$('#movie').on('playing', function() { ... });

來源

2013-07-05 14:28:01 lexmihaylov

我不知道這個插件，但通常你可以連接到一個事件上初始化

$('.movie').jsMovie({ 
    images : ['loader_ani4x4.png'], 
    folder : 'pic/loader/', 
    height : 40, width: 40, 
    grid : {height:40, width:40, columns:4, rows:4}, 
    showPreLoader : false, 
    playOnLoad : true, 
    //events 
    playing: function(v){ 
     console.log(); 
    }; 
});

，或者您可以使用jQuery.on method：

$('#movie').on('playing',function(){ console.log(); });

來源

2013-07-05 14:28:59 giammin

這沒有奏效。 – django

@django由於插件的寫法，第一種方法不起作用：它使用jQuery觸發器，因此您可以使用jquery.on進行附加 – giammin

檢查源文件，我發現內部的功能play_movie_event至極是播放電影（逐幀）的功能。它看起來像：

function play_movie_event(e, fromFrame, toFrame, repeat, performStop){ 

    if(fromFrame === undefined || fromFrame < 1){ 
     fromFrame = 1; 
    } 

    if(toFrame === undefined || toFrame > $(this).data("settings").images.length*$(this).data("settings").grid.rows*$(this).data("settings").grid.columns){ 
     toFrame = $(this).data("settings").images.length*$(this).data("settings").grid.rows*$(this).data("settings").grid.columns; 
    } 

    if(repeat === undefined){ 
     repeat = $(this).data("settings").repeat 
    } 

    if(performStop === undefined){ 
     performStop = true; 
    } 

    if($(this).data("currentStatus") == 'play'){ 
     clearInterval($(this).data("playingInterval")); 
     $(this).data("currentStatus","playing"); 
     var self=this; 
     $(this).data("playingInterval",setInterval(function() { 
      // FPS Measurement 
      if($(self).data("realFpsTimeStamp") != undefined){ 
       $(self).data("realFps",1/(((new Date()).getTime()-$(self).data("realFpsTimeStamp"))/1000)); 
       //verboseOut.apply($(self),[$(self).data("realFps").toFixed(2)+"fps"]); 
      }else{ 
       $(self).data("realFps",$(self).data("settings").fps); 
      } 
      $(self).data("realFpsTimeStamp",(new Date()).getTime()); 

      // play frames 
      if($(self).data("settings").playBackwards){ 
       if($(self).data("currentFrame").data('frame') == fromFrame && !repeat){ 
        if(performStop){ 
         $(self).trigger('stop'); 
        }else{ 
         $(self).trigger('pause'); 
        } 
        $(self).trigger('ended'); 
       }else{ 
        $(self).trigger('playing'); 
        if($(self).data("currentFrame").data('frame') != fromFrame){ 
         methods.previousFrame.apply($(self)); 
        }else{ 
         methods.gotoFrame.apply($(self),[toFrame]); 
        } 
       } 
      }else{ 
       if($(self).data("currentFrame").data('frame') == toFrame && !repeat){ 
        if(performStop){ 
         $(self).trigger('stop'); 
        }else{ 
         $(self).trigger('pause'); 
        } 
        $(self).trigger('ended'); 
       }else{ 
        $(self).trigger('playing'); 
        if($(self).data("currentFrame").data('frame') != toFrame){ 
         methods.nextFrame.apply($(self)); 
        }else{ 
         methods.gotoFrame.apply($(self),[fromFrame]); 
        } 
       } 
      } 

     }, 1000/$(this).data("settings").fps)); 
    } 
}

您probly不關心它是如何工作的，但最重要的是像那些行：

你可以看到所有這些觸發器。它們被放置在文檔中的任何地方。這意味着使用它們的好方法是用.on()

$('#movie').on('stop', function(){})

檢查jQuery的文檔知道.trigger()做：

來源

2013-07-05 14:39:02

從源代碼：

$(this).trigger("play",[fromFrame,toFrame,repeat,performStop]);

被稱爲超線249。 this在這種情況下是DOM元素，因爲它可以通過插件註冊看到：

$.fn.jsMovie = function(method) { 
    //snip... 
    } else if (typeof method === 'object' || ! method) { 
     return methods.init.apply(this, arguments); 
    //snip... 
};

的jsMovie插件本身似乎聽一些自己的事件：

$(this).bind("play",play_movie_event); 
$(this).bind("stop",stop_movie_event); 
$(this).bind("pause",pause_movie_event);

所以，你可以按照自己的例子。最後，你要聽這樣的事件（如其他建議）：

$('#movie').on('play',function(event,fromFrame,toFrame,repeat,performStop) { 
    // event handler function 
});

來源

2013-07-05 14:42:02 Tallmaris

jquery事件處理如何使用

回答

相關問題