javascript - 如何在javascript中为自定义对象调度事件

Question

为视频元素创建包装器。

function YMplayer() {
    this.video = document.getElementById("video"); /* video object */
    this.addEvents();
}

YMplayer.prototype.addEvents = function () {
    var obj = this.video;
    var events = ["load","click"];

    if (obj) {
        if (obj.addEventListener) {
            for (var i in events) {
                obj.addEventListener(i, this.dispatch(i), false);
            }
        } else if (obj.attachEvent) {
            for (var j in events) {
                obj.attachEvent("on" + j, this.dispatch(j));
            }
        }
    }

};

/* Method to dispatch the events */

YMplayer.prototype.dispatch = function (evt) {
    var evtt = document.createEvent("Events");
    evtt.initEvent(evt, true, false);
    document.dispatchEvent(evtt); /* working fine */
};

var YP = new YMplayer();

但我想从上面的 YMplayer 对象发送事件。

需要一个解决方法来访问 YMplayer 实例的 addeventlistener。像

YP.addEventListener("load",callback);

Answer 1

您不能在对象上使用 Javascript 事件，只能在元素上使用。

一个解决方案是手动实现一个简单的“事件系统”，例如使用 .on 方法(类似于 jQuery)并将传递给它的函数存储在您的对象中，并且然后在需要触发“事件”时调用该函数。

例子:

object.prototype.onEvent = function(handler) {
    this.eventHandler = handler;
};

// To bind the event:
instance.onEvent(function(event){
    console.log(event);
});

// When it's time to fire the event, in your object:
this.eventHandler(eventData);

注意:从头开始编写，未经测试，但我不久前实现了类似的东西，基本思想运行良好。

希望我的回答对您有所帮助。