从非DOM对象内部调度和处理自定义事件

时间:2013-11-27 02:15:24

标签: javascript jquery events video

我的应用需要连接,同步和处理网络视频。我正在我的应用程序和它可能遇到的所有网络视频播放器之间编写一个接口类。接口类将确定它正在处理哪种类型的视频播放器,针对适合该播放器的播放器对象设置监听器,并发送规范化事件以供我的应用程序收听。例如,可以要求启用html5的视频播放器.currentTime,而Youtube Flash API则接受请求.getCurrentTime()

在下面的示例中,接口类正在侦听playingseeking等事件,一旦听到这样的事件,就会发出自己的事件。它上面的图层将侦听来自界面的事件,并在我的应用程序中调用相应的函数。

代码
在我的应用程序和接口类之间的层中:

var inter = new VideoInterface( TargetVideoId );
inter.addEventListener("playing", function(){ // Doesn't compile
    console.log('Heard playing from interface...');
}, false );

$(inter).bind( "isPlaying", function(evt) { // Doesn't do anything
    console.log('Heard playing from interface...');
    myApp.start();
});

VideoInterface类,在找到HTML5播放器后添加侦听器和处理程序:

$(vidId).bind({ 
    seeking: function() {
    console.log('Heard seeking, dispatching event...');
        var e = $.event({
            type: "isSeeking",
            message: "stuff",
            date: new Date()
        });
        $.trigger(e);
    }, 

    playing: function() {
    console.log('Heard playing, dispatching event...');
        $.event.trigger({
            type: "isPlaying",
            message: "stuff",
            date: new Date()
        });         
    },

    pause: function() {
    console.log('Heard pause, dispatching event...');
        $.event.trigger({
            type: "isPaused",
            message: "stuff",
            date: new Date()
        });
    }
});

问题
我不确定侦听器是否正在侦听,或者事件是否未触发,但不管怎样,从接口类内部触发的事件都没有到达中间层,它们将被传递给我应用程序。 Heard playing, dispatching event...等是我在控制台中看到的唯一消息 - 触发在中间层捕获事件的消息不会出现。我已经读过你不能将事件监听器附加到变量或者特定情况下的对象,但是如果是这样,我怎样才能完成我想要的效果(同样,对象发送的事件也是如此)任何听它的东西都能捕捉到?)

修改
我通过在我的VideoInterface类中添加bindListenersFor( obj )方法解决了我的问题。 obj是对我的应用的引用,并且界面已经具有对视频对象的内部引用。代码现在看起来像这样:

var inter = new VideoInterface( videoReference );
var app = new App( inter );
inter.bindListenersFor( app );

相关的界面代码:

bindListenersFor : function( obj ) {
    thisClass = this;
    $(this.videoHandle).bind({ 
        seeking: function() {
            obj.seek( thisClass.getCurTime() ); 
        }, 

        playing: function() {
            obj.start();
        },

        pause: function() {
            obj.pause();
        }
    });
},

play : function() {
    this.videoHandle.play();
},

pause : function() {
    this.videoHandle.pause();
},

{ ... }

现在这两个人可以相互交谈,这要归功于在app本身加载之后对主要app对象的引用被传递到接口中(接口作为参数之一)。尽管如此,关于这一点的一些感觉还不够优雅,因此发送和收听自定义变量事件的问题仍然存在。

2 个答案:

答案 0 :(得分:1)

我会尝试通过jQuery绑定到事件并自己处理这些自定义事件。

只要创建一个空数组方法,只要事件X发生就调用。

换句话说:

function VideoInterface() {
  this.isPlayingHandlers = [];
}

var inter = new VideoInterface( TargetVideoId );    
inter.isPlayingHandlers.push(function(data) { 
    console.log('Heard playing from interface...');
});

// inside the .bind()
playing: function() {
    console.log('Heard playing, dispatching event...');
        var eventData = 'blah';
        for (var handler in inter.isPlayingHandlers)
           handler(eventData);
}

答案 1 :(得分:0)

您尝试使用的方法适用于DOM事件。您可以使用回调而不是事件,也可以实现节点EventEmmiter

之类的内容