普通Javascript对象可以调度事件吗?还是只有DOM节点才有可能

Can regular Javascript objects dispatch events or is this only possible for DOM nodes?

本文关键字：DOM 节点 有可能 对象 Javascript 调度 事件 普通      更新时间：2023-09-26

我已经创建了一个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();
});
我pseudoclass 

(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等找到足够的多边形填充。jQuery提供了一个优秀的抽象层，语法熟悉，我的团队经常使用它。然而，请让我知道如果有一个干净的，香草的Javascript解决方案!

您可以自己模拟简单的事件处理:

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

您不必使用DOM作为事件生成/处理机制。你可以自己写，或者使用Backbone之类的东西。

相关文章：