是否可以在常規對象（不是DOM）上分派事件？

Question

我剛剛發現FileReader調度事件就像它是一個DOM元素一樣。是嗎？我想知道是否有可能創建一個類似於FileReader的對象，該對象在HTML/XML結構中沒有表示形式，但可以派發事件？

Answer 1

FileReader有一個像addEventHandler方法，因爲它是defined實現EventTarget接口。 EventTarget由DOM Events規範定義，但您不需要是一個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級別3 defaultPrevented屬性，並且不支持DOM級別3 stopImmediatePropagation()（除非您依靠自己的Event對象公開一個屬性它）。也沒有實現層次結構或捕捉/冒泡。

所以IMO：通過嘗試編寫參與DOM事件模型的代碼，你並沒有太多收穫。對於普通的JS回調工作，我只需要自己實現監聽器列表。

Answer 2

我認爲它是javascript;通常，任何可以獲得對DOM元素的引用的對象都應該能夠使用element.dispatchEvent函數分派事件;見：

https://developer.mozilla.org/en/DOM/document.createEvent

https://developer.mozilla.org/en/DOM/element.dispatchEvent

Answer 3

bobince has the right idea，但他的代碼只是一個例子。對於經過實際測試的實施，Mr. Doob has one that he uses in three.js。

Answer 4

jQuery可以從常規對象派發事件。 Here's a fiddle。

function MyClass() { 
    $(this).on("MyEvent", function(event) { 
     console.log(event); 
    }); 

    $(this).trigger("MyEvent"); 
} 

var instance = new MyClass();