2013-04-30 9 views
5
fragen

So haben wir eine Seite:addEventListener ruft die Funktion, ohne dass ich es zu

<span id='container'> 
    <a href='#' id='first'>First Link</a> 
    <a href='#' id='second'>Second Link</a> 
</span> 

Und wollen einige Klick-Ereignisse hinzuzufügen:

first.addEventListener('click', function(){alert('sup!');}) 

wirkt wie ein Zauber! Jedoch, wenn Sie das zweite Argument eine externe Funktion machen:

Es ruft die Funktion sofort auf. Wie kann ich das stoppen? So nervig!

Hier ist eine Live-Demo: http://jsfiddle.net/ey7pB/1/

+1

Da der zweite Parameter eine Funktion ** reference ** erwartet, müssen Sie eine angeben. Mit Ihrem problematischen Code rufen Sie sofort die Funktion auf und übergeben ihr Ergebnis (was * undefiniert * ist). Entweder rufen Sie die Funktion in einer anonymen Funktion auf (wie in Ihrem ersten Beispiel) oder ändern Sie die Funktion, um eine Funktion ** zurückzugeben ** (wahrscheinlich nicht ideal). – Ian

+1

Warum ist das nicht ideal? Es scheint gegen D.R.Y. um meine Funktion in den 4 oder so addEventListeners zu kopieren, die im Setting sind, nein? – LittleBobbyTables

+0

Eine weitere Option besteht darin, die erforderliche Nachricht als Attribut für das Element zu speichern, dann die Funktion als 'second.addEventListener ('click', message_me) 'zu binden und die Nachricht vom Attribut und nicht von einem Parameter abrufen zu lassen. – nnnnnn

Antwort

7
function message_me(m_text){ 
    alert(m_text) 
} 

second.addEventListener('click', 
    function() { 
     message_me('shazam'); 
    } 
); 

Hier ist eine aktualisierte fiddle.

+0

Boom! Vielen Dank. Will diese Antwort annehmen, wenn SO mich lässt: D – LittleBobbyTables

+0

Ich denke, du solltest deine angenommene Antwort aktualisieren, weil die Funktion übergeben wird, ohne sie aufzurufen und zu binden - ist wahrscheinlich eine bessere Wahl hier. – IonicBurger

+0

Können Sie erklären, warum Sie denken, Bind ist eine bessere Wahl? – clav

4

Da der zweite Parameter eine Funktion Referenz erwartet, müssen Sie eine angeben. Mit Ihrem problematischen Code rufen Sie sofort die Funktion auf und übergeben ihr Ergebnis (das ist undefined ... weil die ganze Funktion alert ist und nichts zurückgibt). Rufen Sie die Funktion entweder in einer anonymen Funktion auf (wie im ersten Beispiel) oder ändern Sie die Funktion, um eine Funktion zurückzugeben.

Sie können dies tun:

function message_me(m_text){ 
    alert(m_text); 
} 

second.addEventListener('click', function() { 
    message_me('shazam') 
}); 

oder dieses:

function message_me(m_text){ 
    return function() { 
     alert(m_text); 
    }; 
} 

second.addEventListener('click', message_me('shazam')); 

DEMO:http://jsfiddle.net/tcCvw/

2

oder können Sie .bind verwenden

function message_me(m_text){ 
    alert(m_text); 
} 

second.addEventListener('click', message_me.bind(this, 'shazam')); 

check über 'closures'

+0

Dies sollte die akzeptierte Antwort sein – IonicBurger

+0

+1 Bindung sollte der Weg sein zu gehen - nicht sicher, ob das vor 4 Jahren verfügbar war, aber ist definitiv der bevorzugte Weg bis heute, im Gegensatz zu einer anonymen Funktion erstellen – vol7ron

Verwandte Themen