常规Javascript对象可以调度事件,还是只能用于DOM节点？

Question

我已经创建了一个Javascript伪类,我希望它能够调度自定义事件.不幸的是,似乎只有DOM节点能够调度事件.因此,我被迫将DOM节点与我的伪类的每个实例相关联,以便DOM节点可以代表我的类调度事件.

我希望能够将事件监听器直接添加到我的伪类的实例中.不幸的是,因为伪类无法调度它自己的事件,所以我必须将事件监听器添加到关联的DOM节点.

当我这样做时,我的事件处理函数接收对DOM节点而不是伪类实例的引用.在我可以调用它的方法之前,我必须确定DOM节点属于哪个伪类实例.

我试图尽可能保持我的Javascript和DOM之间的清晰分离.当然,有时将伪类实例与DOM元素相关联是有意义的,但我不希望这是一个绝对的要求.

我的样板代码:

jQuery(document).ready(function($){

    var cat = new Animal($('#cat'), 'Larry', 'Meow');

    cat.domElement.on('spoken', function(event){
        var classInstance = $(this).data('instance');
        console.log(classInstance.firstName + ' has spoken');
    });

    cat.speak();

});

我的假类

(function(){

    window.Animal = Animal;

    function Animal(domElement, firstName, sound) {
        // Save a reference to the DOM node
        this.domElement = domElement;

        // Give the DOM node a reference to this class instance
        this.domElement.data('instance', this);

        this.firstName = firstName;
        this.sound = sound;
    }

    Animal.prototype.speak = function() {
        console.log(this.sound);
        this.domElement.trigger('spoken');
    };

}(window));

旁注:我需要支持IE8等传统浏览器.我非常努力地使用正确的Javascript事件模型,而不是依赖于jQuery.不幸的是,我无法为dispatchEvent,addEventListener,removeEventListener,Event,CustomEvent等找到足够的polyfill .jQuery提供了一个具有熟悉语法的优秀抽象层,我的团队无论如何都会定期使用它.但是,如果有一个干净的,香草味的Javascript解决方案,请告诉我!

Answer 1

您可以自己相对容易地模拟简单的事件处理：

function Animal(domElement, firstName, sound) {
    this.$$handler = {};
}

Animal.prototype.on = function (eventType, callback) {
    if (!this.$$handler[eventType]) {
        this.$$handler[eventType] = [];
    }
    this.$$handler[eventType].push(callback);
};

Animal.prototype.trigger = function (eventType, args) {
    var i, max_i,
        handler = this.$$handler[eventType];

    if (!handler) {
        return;
    } 
    for (i = 0, max_i = handler.length; i < max_i; i++) {
        handler[i](args);
    }

};

Animal.prototype.speak = function() {
    this.trigger('spoken', {"eventargs": []});
};


//on the instance
cat.on('spoken', function(args){
    var classInstance = $(this).data('instance');
    console.log(classInstance.firstName + ' has spoken');
});