10

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

4

4 に答える 4

13

FileReaderインターフェイスを実装するように定義さaddEventHandlerれているため、のようなメソッドがあります。はDOMイベント仕様で定義されていますが、実装するためにDOMオブジェクトである必要はありません。、およびは、を実装する他のブラウザオブジェクトモデルオブジェクトです。EventTargetEventTargetwindowXMLHttpRequestFileReaderEventTarget

残念ながら、ブラウザのイベントターゲットのネイティブ実装に便乗する簡単な方法はありません...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;
};

注意：上記のコードは頭から離れており、テストされていませんが、機能する可能性があります。ただし、オブジェクトがDOMレベル3プロパティをサポートしているdispatchEvent場合にのみ戻り値をサポートし、DOMレベル3をサポートしないなどの制限があります（プロパティを公開する独自のEventオブジェクトに依存しない限り実装できません）。また、階層やキャプチャ/バブリングの実装はありません。EventdefaultPreventedstopImmediatePropagation()

つまり、IMO：DOMイベントモデルに参加するコードを作成しようとしても、あまり利益は得られません。プレーンJSのコールバック作業では、リスナーリストの独自のアドホック実装を使用します。

于 2011-07-09T15:56:44.140 に答える
4

bobince は正しい考えを持っていますが、彼のコードは単なる例です。実際の戦いでテストされた実装のために、Doob 氏は three.js で使用するものを持っています。

于 2013-03-28T04:50:49.860 に答える
0

私はそれがjavascriptだと思います; 通常、DOM要素への参照を取得できるオブジェクトは、element.dispatchEvent関数を使用してイベントをディスパッチできる必要があります。見る ：

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

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

于 2011-07-09T13:57:23.243 に答える