Bindung von .on-Ereignissen mit einem Objekt

Question

Ich habe versucht, ein Objekt von Ereignissen mithilfe eines for-Schlüssels in Objektschleife zu binden.

events = { 
    mouseup:function(data){console.log(data)}, 
    mousedown:function(data){console.log(data)}, 
} 
for (var key in events) { 
      console.log('binding: ' + key) ; 
      $('body').on(key ,function(data){ 
       console.log(key ,data); 
      }) 

} 

Das letzte Objekt (mousedown) wird jedoch für beide Ereignisse gebunden. Könnte jemand erklären warum?

Schauen Sie sich die Geige für ein komplettes Beispiel an.

https://jsfiddle.net/2439rw4a/

Answer 1

Yeap - weil key erst das Ereignis ausgelöst wird ausgewertet, und von dieser Zeit wurde es überschrieben und ‚mousedown-‘ bleibt.

Sie müssen den aktuellen Wert von key zum Zeitpunkt der Bindung des Ereignisses isolieren. Sie haben zwei Möglichkeiten:

1) Senden Sie es über einen sofort ausgeführten Funktionsabschluss ein. Dies erfasst eine lokale Kopie von key im Rahmen des Ereignisrückrufs.

for (var key in events) { 
    $('.box').on(key, (function(key) { return function(data){ 
     console.log(key); 
    }; })(key)); 

2) senden es in über Ereignisdaten

for (var key in events) { 
    $('.box').on(key, {key: key}, function(evt){ 
     console.log(evt.data.key); 
    }); 

Answer 2

es ist ein gutes Beispiel für einen solchen Fehler-Typ.

Sie erhalten ein solches Verhalten, weil key in console.log(key) gleich letzten Schlüssel in for Schleife ist. Alle funktionieren gut, nur Konsolenprotokoll ändern Ereignistyp zu zeigen, keine key:

events = { 
    mouseup:function(data){console.log(data)}, 
    mousedown:function(data){console.log(data)}, 
} 
for (var key in events) { 
      console.log('binding: ' + key) ; 
      $('.box').on(key ,function(data){ 
       console.log(event.type); 
      }) 

} 

jsfiddle: https://jsfiddle.net/2439rw4a/

Answer 3

Zu der Zeit, das Ereignis ausgelöst wird, wird der Wert von keydie letzten Schlüssel ist. Die Ausführung des Codes ist ähnlich:

key = 'mouseup'; 

$('body').on(...); 

key = 'mousedown'; 

$('body').on(...); 

// By this time, key = 'mousedown' 
// Mouse is clicked. 
// When even fires, it looks for key which by now has the last key 

Betrachten Object.keys und array.forEach verwenden. Auf diese Weise sieht Ihr Handler key als den Wert bei dieser Iteration anstelle einer gemeinsamen key Variable.

Object.keys(events).forEach(function(key){ 
    console.log('binding: ' + key) ; 
    $('body').on(key ,function(data){ 
    console.log(key ,data); 
    }) 
});