1

addEventListenerをクリックしてプロトタイプの結果を実行しようとしていますが、クリックしなくても結果が表示されます。

<div id="box">Your Item:</div>

<button id="myBtn">Buy</button>

<script type="text/javascript">
function Machine(n,p){
this.name = n;
this.price = p;
}


Machine.prototype.Dispatch = function(){
var container = document.getElementById('box');
container.innerHTML = this.name + " " + this.price;
}
var Drink = new Machine("coke",80);
var Handle = document.getElementById('myBtn');
Handle.addEventListener("click",Drink.Dispatch(),false);
</script>

http://jsfiddle.net/9trqK/

4

3 に答える 3

10

次のように関数を呼び出す（そしてその戻り値を渡す）のではなく、に関数参照を渡す必要があります。addEventListener

Handle.addEventListener("click", Drink.Dispatch, false);

これを行うと、ハンドラーはクリック時にのみ起動されます。ただし、別の問題に直面します。thisハンドラー内には、Machineインスタンスではなく、クリックされた要素があります。これを解決するには、次を使用できますFunction.bind（古いブラウザのポリフィルについては、リンクされたドキュメントを参照してください）。

var drink = new Machine("coke",80);
var handle = document.getElementById('myBtn');
handle.addEventListener("click", drink.Dispatch.bind(drink), false);

注：コンストラクター関数名には大文字のイニシャルのみを使用するのが一般的な方法であるため、一目で区別できます。そのため、名前をandtoandに変更しDrinkましHandleた。drinkhandle

于 2013-01-11T20:01:45.867 に答える
2

リスナーのfunction（）{}クロージャの間に呼び出しを追加する必要があります。または、関数名の後の（）を削除します。

これは機能するはずです：http：//jsfiddle.net/9trqK/1/

function Machine(n, p) {
  this.name = n;
  this.price = p;
}
var handle = document.getElementById('myBtn');
Machine.prototype.Dispatch = function () {
  var container = document.getElementById('box');
  container.innerHTML = this.name + " " + this.price;
}
var Drink = new Machine("coke", 80);
handle.addEventListener("click", function() { Drink.Dispatch() }, false);
于 2013-01-11T20:03:18.123 に答える
0

オブジェクトに対してカスタムイベントを実行するには、次の簡単なスクリプトを使用してオブジェクトを拡張します。

/* Simple Custom event prototype for objects

Extend your object like this:

<OBJECT>.prototype = new EventEmitter;

Then you can use :

<OBJECT>.on("test",function() { alert("Test event triggered"); })
<OBJECT>.on("test",function() { alert("Test event 2 triggered"); })
<OBJECT>.trigger("test");

*/
function EventEmitter() {

    var listeners = Object();   //Matrix of event/callbacks

    //Add listener
    this.on = function(evt, callback) {
        //console.log("Listener added: " + evt);

        if (!listeners.hasOwnProperty(evt))
            listeners[evt] = Array();

        listeners[evt].push(callback);      
    }

    //Call listeners
    this.trigger = function(evt, params) {
        //console.log("trigger called " + evt);
        //console.dir(listeners);

        if (evt in listeners) {
            callbacks = listeners[evt];
            //Call all callbacks with the params
            for (var x in callbacks){
                callbacks[x](params);
            }
        } else {
            console.log("No listeners found for " + evt);
        }

    }
}
于 2014-04-07T14:47:36.997 に答える