イベントは通常のオブジェクト（DOMオブジェクトではない）にディスパッチできますか？

Question

私は、FileReaderがまるでDOM要素であるかのようにイベントをディスパッチすることを知りました。それは...ですか？ HTML/XML構造の表現を持たないFileReaderに似たオブジェクトを作成することは可能ですが、イベントをディスパッチできますか？

Answer 1

FileReaderはaddEventHandlerのようなメソッドを持っています。 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; 
}; 

注意：上記のコードの私の頭の上から未検証ですが、動作する可能性があります。しかし、EventオブジェクトがDOMレベル3 defaultPreventedプロパティをサポートし、DOMレベル3のサポートがない場合はdispatchEvent戻り値をサポートするような制限があります。stopImmediatePropagation()（実装不可能な独自のEventオブジェクトに依存しない限りそれ）。また、階層やキャプチャ/バブリングの実装もありません。

だからIMO：あなたはDOMイベントモデルに参加するコードを書いてみることはあまりありません。プレーンJSコールバックの仕事のために、リスナーリストの独自の特別な実装を行っています。

Answer 2

私はそれがjavascriptだと仮定します。通常、DOM要素への参照を取得できるオブジェクトはすべて、element.dispatchEvent関数を使用してイベントを送出できます。参照：それはEventTargetインタフェースを実装するdefinedあるので

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();