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

Answer 2

您不必将DOM用作事件生成/处理机制。你可以编写自己的，或使用Backbone.Events之类的东西，它被设计成混合到任何一个类中。

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

2 个答案: