11

私が欲しいのは、いくつかのイベントを提供するカスタムオブジェクトです。例えば：

var CustomObjectTextChangedEventName = 'textChanged';
var CustomObject = function () {
    var _this = this;
    var _text = "";

    _this.OnTextChanged = document.createEvent("Event");
    _this.OnTextChanged.initEvent(CustomObjectTextChangedEventName, true, false);

    _this.ChangeText = function (newText) {
        _text = newText;
        fireTextChanged();
    };

    function fireTextChanged() {
        _this.dispatchEvent(_this.OnTextChanged);
    }
}

イベントを使用するコードは次のようになります。

myCustomObject = new CustomObject();
myCustomObject.addEventListener(CustomObjectTextChangedEventName, handleTextChanged, false);

ご覧のとおり...JSでのイベントのデフォルトの使用方法ですが、機能させることはできません...

現在、私の問題は、オブジェクトが実装されていないことですaddEventListenerがdispatchEvent、この関数は通常、「要素」から実装されています。

どういうわけかそれらを利用可能にすることはできますか、それとも自分でそれらを実装する必要がありますか？それらをどのように実装する必要がありますか？

独自のイベント処理を実装する必要がありますか？（ハンドラーの内部リスト、「追加」および「削除」ハンドラー関数があり、イベントを発生させたいときに各ハンドラーを発生させます）？

4

4 に答える 4

20

addEventListener関数はElementクラスのメソッドです。1つの方法は、次のようにCustomObject継承することElementです。

CustomObject.prototype = Element.prototype;

問題は、Elementクラスが異なるブラウザ間で異なる実装を持っている可能性があることです。したがって、たとえば、イベントの発生は簡単ではない場合があります（この投稿を参照）。

だから私は自分でこれを行うことをお勧めします。難しいことではありません。次のようなことを試してください。

var CustomObject = function () {
    var _this = this;
    _this.events = {};

    _this.addEventListener = function(name, handler) {
        if (_this.events.hasOwnProperty(name))
            _this.events[name].push(handler);
        else
            _this.events[name] = [handler];
    };

    _this.removeEventListener = function(name, handler) {
        /* This is a bit tricky, because how would you identify functions?
           This simple solution should work if you pass THE SAME handler. */
        if (!_this.events.hasOwnProperty(name))
            return;

        var index = _this.events[name].indexOf(handler);
        if (index != -1)
            _this.events[name].splice(index, 1);
    };

    _this.fireEvent = function(name, args) {
        if (!_this.events.hasOwnProperty(name))
            return;

        if (!args || !args.length)
            args = [];

        var evs = _this.events[name], l = evs.length;
        for (var i = 0; i < l; i++) {
            evs[i].apply(null, args);
        }
    };
}

今それを使用することは次のように簡単です：

var co = new CustomObject();
co.addEventListener('textChange', function(name) {
    console.log(name); 
});
co.fireEvent('textChange', ['test']);

これは基本的な解決策です。あなたはそれを変えたいかもしれませんが、私はあなたがその考えを理解するべきだと思います。

于 2012-06-11T11:17:39.013 に答える
1

気まぐれなコードでサンプルを改善しました。私はまだイベント処理部分を「基本クラス」に抽出します...多分もう少し時間があれば=）

jQueryを使用するためのサンプルもあります！

<!doctype html>
<html lang="en">
<head>    
    <title>Custom Events Test</title>    
    <meta charset="utf-8">    
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>    
    <script>
        /* jQuery

        var CustomObjectTextChangedEventName = 'textChanged';
        var CustomObject = function () {
            var _this = this;
            var _text = "";

            _this.ChangeText = function (newText) {
                _text = newText;
                fireTextChanged();
            };

            function fireTextChanged() {
                $(_this).trigger(CustomObjectTextChangedEventName, _text);
            }
        }

        var myCustomObject;
        $(document).ready(function () {
            myCustomObject = new CustomObject();
            $(myCustomObject).bind(CustomObjectTextChangedEventName, handleTextChanged);
        })

        function handleTextChanged(event, msg) {
            window.alert(msg);
        }

        function buttonClick() {
            var newText = document.getElementById('tbText').value;

            myCustomObject.ChangeText(newText);
        }

        */


        var CustomObjectTextChangedEventName = 'textChanged';
        var CustomObject = function (alias) {
            var _this = this;
            var _events = {};
            var _text = "";

            _this.Alias = alias;

            _this.OnTextChanged = document.createEvent("Event");
            _this.OnTextChanged.initEvent(CustomObjectTextChangedEventName, true, false);

            _this.ChangeText = function (newText) {
                var args = new TextChangedEventArgs();
                args.OldText = _text;
                args.NewText = newText;

                _text = newText;
                fireEvent(CustomObjectTextChangedEventName, args);
            };

            _this.addEventListener = function (name, handler) {
                if (_events.hasOwnProperty(name))
                    _events[name].push(handler);
                else
                    _events[name] = [handler];
            };

            _this.removeEventListener = function (name, handler) {
                /* This is a bit tricky, because how would you identify functions? 
                This simple solution should work if you pass THE SAME handler. */
                if (!_events.hasOwnProperty(name))
                    return;

                var index = _events[name].indexOf(handler);
                if (index != -1)
                    _events[name].splice(index, 1);
            };

            function fireEvent(name, args) {
                if (!_events.hasOwnProperty(name))
                    return;

                var evs = _events[name], l = evs.length;
                for (var i = 0; i < l; i++) {
                    evs[i](_this, args);
                }
            }
        }

        var TextChangedEventArgs = function () {
            var _this = this;

            _this.OldText = null;
            _this.NewText = null;
        }

        var myCustomObject;
        var myCustomObject2;
        window.onload = function () {
            myCustomObject = new CustomObject("myCustomObject");
            myCustomObject.addEventListener(CustomObjectTextChangedEventName, handleTextChanged);

            myCustomObject2 = new CustomObject("myCustomObject2");
            myCustomObject2.addEventListener(CustomObjectTextChangedEventName, handleTextChanged);
        };

        function handleTextChanged(sender, args) {
            window.alert('At ' + sender.Alias + ' from [' + args.OldText + '] to [' + args.NewText + ']');
        }

        function buttonClick() {
            var newText = document.getElementById('tbText').value;

            myCustomObject.ChangeText(newText);
        }

        function buttonClick2() {
            var newText = document.getElementById('tbText2').value;

            myCustomObject2.ChangeText(newText);
        }
    </script>
</head>
<body>
    <input type="text" id="tbText" />
    <input type="button" value="Change" onclick="buttonClick();" />

    <input type="text" id="tbText2" />
    <input type="button" value="Change" onclick="buttonClick2();" />
</body>

于 2012-06-11T13:09:10.903 に答える
1

すべてが100％かどうかはわかりませんが、次はこの問題に関する私の古い調査の結果です。

  • どういうわけかこれを利用可能にすることはできません。
  • 独自のロジックを実装するだけです。このために、MDNelement.removeEventListenerの記事にあるコードをほとんど変更せずに使用できます。その下に、MDNリンクからのコードのコピー\過去：
// code source: MDN: https://developer.mozilla.org/en/DOM/element.removeEventListener
// without changes
if (!Element.prototype.addEventListener) {  
  var oListeners = {};  
  function runListeners(oEvent) {  
    if (!oEvent) { oEvent = window.event; }  
    for (var iLstId = 0, iElId = 0, oEvtListeners = oListeners[oEvent.type]; iElId < oEvtListeners.aEls.length; iElId++) {  
      if (oEvtListeners.aEls[iElId] === this) {  
        for (iLstId; iLstId < oEvtListeners.aEvts[iElId].length; iLstId++) { oEvtListeners.aEvts[iElId][iLstId].call(this, oEvent); }  
        break;  
      }  
    }  
  }  
  Element.prototype.addEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {  
    if (oListeners.hasOwnProperty(sEventType)) {  
      var oEvtListeners = oListeners[sEventType];  
      for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {  
        if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }  
      }  
      if (nElIdx === -1) {  
        oEvtListeners.aEls.push(this);  
        oEvtListeners.aEvts.push([fListener]);  
        this["on" + sEventType] = runListeners;  
      } else {  
        var aElListeners = oEvtListeners.aEvts[nElIdx];  
        if (this["on" + sEventType] !== runListeners) {  
          aElListeners.splice(0);  
          this["on" + sEventType] = runListeners;  
        }  
        for (var iLstId = 0; iLstId < aElListeners.length; iLstId++) {  
          if (aElListeners[iLstId] === fListener) { return; }  
        }       
        aElListeners.push(fListener);  
      }  
    } else {  
      oListeners[sEventType] = { aEls: [this], aEvts: [ [fListener] ] };  
      this["on" + sEventType] = runListeners;  
    }  
  };  
  Element.prototype.removeEventListener = function (sEventType, fListener /*, useCapture (will be ignored!) */) {  
    if (!oListeners.hasOwnProperty(sEventType)) { return; }  
    var oEvtListeners = oListeners[sEventType];  
    for (var nElIdx = -1, iElId = 0; iElId < oEvtListeners.aEls.length; iElId++) {  
      if (oEvtListeners.aEls[iElId] === this) { nElIdx = iElId; break; }  
    }  
    if (nElIdx === -1) { return; }  
    for (var iLstId = 0, aElListeners = oEvtListeners.aEvts[nElIdx]; iLstId < aElListeners.length; iLstId++) {  
      if (aElListeners[iLstId] === fListener) { aElListeners.splice(iLstId, 1); }  
    }  
  };  
}
  • Element.prototype変更する必要があるのは、に置き換えることだけだと思いますCustomObject.prototype。また、サポートするには、コード行dispathEventを追加する必要があります。CustomObject.prototype.dispatchEvent = runListener;また、このコードをクロージャ関数に含める方がよい場合もあります。

私は自分のアプリでこれをテストしていませんが、おそらくこれはあなたを助けることができます。

更新： 次のリンクXObject()は、イベントの追加/削除およびディスパッチイベントをサポートするクラスを含むコードソースを指します。テスト例が含まれています。すべてのコードは上記の回答に基づいています。 http://jsfiddle.net/8jZrR/

于 2012-06-11T11:33:20.607 に答える
0

使用法：jsfiddle

これは単純なアプローチですが、一部のアプリケーションでは機能する可能性があります。

CustomEventTarget.prototype = {

    'constructor': CustomEventTarget,

    on:   function( ev, el ) { this.eventTarget.addEventListener( ev, el ) },
    off:  function( ev, el ) { this.eventTarget.removeEventListener( ev, el ) },
    emit: function( ev ) { this.eventTarget.dispatchEvent( ev ) }

}

function CustomEventTarget() { this.eventTarget = new EventTarget }
于 2018-03-15T01:21:55.160 に答える