Übergabe einer Variablen an eine addEventListener-Funktion

Question

Ich habe Probleme, herauszufinden, warum dieser Code nicht ausgeführt wird. Ich bekomme überhaupt keinen Fehler in der Konsole.

const remove = saClass => { 
    document.getElementsByClassName('site-alert')[0].remove(); 
}; 

const sitealert = ({message = 'Default message', dismissText = 'Close', className = 'site-alert'}) => { 
    render(`<div id="sitealert" class="${className}">${message}<button id='close-message'>${dismissText}</button><div>`); 
    document.getElementById('close-message').addEventListener('click', remove(className), false); 
}; 

export const init = (options) => sitealert(options); 

Wenn ich hinzufügen, einen Parameter remove(className) an die addEventListener der Code überhaupt nicht laufen, und ich bekomme keinen Fehler in der Konsole.

Wenn ich den Parameter entfernen, funktioniert alles gut.

Übergeben ich eine Variable falsch?

Ich sollte beachten, dass ich babel verwende, um den Code in ein UMD-Format zu konvertieren.

Danke, Dave

Answer 1

Ein Ausdruck wie

functionName(expression) 

ist ein Anruf an die Funktion. Was Sie wollen, ist eine andere Funktion. Sie können, dass explizit tun:

() => remove(className) 

oder mit .bind():

remove.bind(null, className) 

Answer 2

Das zweite Argument von addEventListener Bedürfnisse eine Funktion sein.

remove ist eine Funktion.

remove(className) ist das Ergebnis des Aufrufs dieser Funktion mit einem Argument. Da die Funktion keine return-Anweisung hat, ist das Ergebnis undefined. Wenn Sie eine Funktion generieren wollen, die remove mit einem Argument aufruft, verwenden Sie bind.

remove.bind(null, className) 

Answer 3

Sie einen Verschluss in den Variablen passieren kann und dann den eigentlichen Rückruf zurück:

const sitealert = ({message = 'Default message', dismissText = 'Close', className = 'site-alert'}) => { 
    render(`<div id="sitealert" class="${className}">${message}<button id='close-message'>${dismissText}</button><div>`); 
    document.getElementById('close-message').addEventListener('click', remove(className), false); 
}; 

function remove(yourVar) { 
    return function (e) { 
     //yourVar is available here 
    } 
} 

Answer 4

Wenn Sie eine fonction mit Parametern haben, sollten Sie verwenden:

.addEventListener('onclick', function() {remove(className)}, true); 

um eine Funktion zu spezifizieren