是否可以在常规对象(而不是DOM对象)上调度事件？

Question

我刚刚发现FileReader调度事件就像它是一个DOM元素一样.是吗？我想知道是否有可能创建一个类似于FileReader的对象,它没有HTML/XML结构中的表示,但可以调度事件？

Answer 1

FileReader有方法,addEventHandler因为它被定义为实现EventTarget接口.EventTarget由DOM事件规范定义,但您不需要是DOM对象来实现它.window,XMLHttpRequest以及实现FileReader的其他浏览器对象模型对象EventTarget.

不幸的是,没有简单的方法来捎带浏览器的事件目标的本机实现...你可以尝试通过使用一个作为prototype属性继承浏览器对象,但这通常是非常不可靠的.但是,编写代码以在纯JavaScript中自己实现所有方法并不困难:

function CustomEventTarget() { this._init(); }

CustomEventTarget.prototype._init= function() {
    this._registrations= {};
};
CustomEventTarget.prototype._getListeners= function(type, useCapture) {
    var captype= (useCapture? '1' : '0')+type;
    if (!(captype in this._registrations))
        this._registrations[captype]= [];
    return this._registrations[captype];
};

CustomEventTarget.prototype.addEventListener= function(type, listener, useCapture) {
    var listeners= this._getListeners(type, useCapture);
    var ix= listeners.indexOf(listener);
    if (ix===-1)
        listeners.push(listener);
};

CustomEventTarget.prototype.removeEventListener= function(type, listener, useCapture) {
    var listeners= this._getListeners(type, useCapture);
    var ix= listeners.indexOf(listener);
    if (ix!==-1)
        listeners.splice(ix, 1);
};

CustomEventTarget.prototype.dispatchEvent= function(evt) {
    var listeners= this._getListeners(evt.type, false).slice();
    for (var i= 0; i<listeners.length; i++)
        listeners[i].call(this, evt);
    return !evt.defaultPrevented;
};

注意:上面的代码不在我的头顶并且未经测试,但可能有效.但是它有一些限制,例如,dispatchEvent如果Event对象支持DOM Level 3 defaultPrevented属性,则仅支持返回值,并且不支持DOM Level 3 stopImmediatePropagation()(除非您依赖自己的Event对象为其公开属性,否则无法实现).此外,没有层次结构或捕获/冒泡的实现.

所以IMO:通过尝试编写参与DOM Events模型的代码,你获得的收益并不高.对于普通的JS回调工作,我只是使用你自己的临时实现的监听器列表.