如何在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);

- balaji g

---

我在这里找到了几个有用的答案：https://dev59.com/CGw15IYBdhLWcg3wZ68Y#6635854 - ryaz

Answer 1

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

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

例如：

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);

注意：这是从头开始编写的代码，尚未经过测试，但我不久前实现了类似的东西，基本思路非常好。

希望我的答案能够帮到你。

- Wouter