Réécriture du titre : la fonction est appelée par addEventListener sans ma demande explicite

Question

Nous avons donc une page :

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

Et je souhaite ajouter des événements de clic :

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

Fonctionne à merveille ! Mais lorsque vous définissez le deuxième argument sur une fonction externe :

function message_me(m_text){
    alert(m_text)
}

second.addEventLis tener('click', message_me('shazam'))

Il appelle la fonction immédiatement. Comment puis-je arrêter cela ? Si ennuyant!

Ceci est une démo en direct : http://jsfiddle.net/ey7pB/1/

Answer 1

Étant donné que le deuxième argument nécessite une fonction référence , vous devez en fournir une. Avec le code en question, vous appelleriez immédiatement la fonction et lui transmettriez son résultat (qui est 未定义... car tout ce que la fonction fait est alerte et ne renvoie rien). Appelez la fonction dans une fonction anonyme (comme votre premier exemple) ou modifiez la fonction pour renvoyer une fonction.

Vous pouvez faire ceci :

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

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

Ou ceci :

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

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

Démo : http://jsfiddle.net/tcCvw/ p>

Answer 2

Citant la réponse de Ian :

function message_me(m_text){
    alert(m_text)
} 

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

Ceci est un violon mis à jour.