[Javascript] Pourquoi addEventListener se déclenche-t-il avant l'événement?


Answers

Tout d'abord, votre utilisation de l'écouteur d'ajout d'événement est incorrecte. L'écouteur d'événement add attend une référence de fonction dans le second paramètre et non un appel de fonction.

Ce qui suit est une référence de fonction:

var myfunctionreference = addTextNode;

Ceci est un appel de fonction et exécutera la fonction

var myfunctioncall = addTextNode();

Dans votre code, vous appelez la fonction à utiliser comme gestionnaire d'événements au lieu de la référencer. Voici quelques références pour .addEventListener ()

Vous devriez lier l'événement comme ceci:

button.addEventListener("click", addTextNode);

Deuxièmement, l'événement connaît l'élément et connaît l'événement. Votre appel de fonction doit être créé pour accepter l'événement et non une chaîne arbitraire. Ensuite, en utilisant l'événement ou "ceci" vous permettra de mettre la main sur le texte que vous cherchez.

function addTextNode(evt) {
    var newtext = document.createTextNode(this.innerHTML),
        p1 = document.getElementById("p1");

    p1.appendChild(newtext);
}
Question

Cette question a déjà une réponse ici:

J'expérimentais [dans jsfiddle] w / une fonction créée pour ajouter un TextNode nouvellement créé au <p> dans le HTML ci-dessous:

    <button onclick="addTextNode('YES! ');">YES!</button>
    <button onclick="addTextNode('NO! ');">NO!</button>
    <button onclick="addTextNode('WE CAN! ');">WE CAN!</button>
    <hr />
    <p id="p1">First line of paragraph.</p>

Voici mon javascript aussi:

    function addTextNode(text) {
        var newtext = document.createTextNode(text),
            p1 = document.getElementById("p1");

        p1.appendChild(newtext);
    }

Cela fonctionne bien. Cependant, le crux se révèle quand je tente de rendre mon javascript "discret" en supprimant le comportement du balisage ...

    <button>YES!</button>
    <button>NO!</button>
    <button>WE CAN!</button>
    <hr />
    <p id="p1">First line of paragraph.</p>

puis en utilisant une boucle pour attacher addEventListener à chaque élément <button> , qui à son tour utilise le TextNode enfant pour appeler addTextNode :

    function addTextNode(text) {
        var newtext = document.createTextNode(text),
            p1 = document.getElementById("p1");

        p1.appendChild(newtext);
    }

    var btns = document.getElementsByTagName("button");

    for(i = 0; i < btns.length; i++){
        var button = btns[i]; 
        button.addEventListener("click", addTextNode(button.innerHTML));
    }

Deux choses étranges se produisent avec mon code:
Lorsque l'enveloppe de code de [jsfiddle's] est définie sur "no wrap-in head", rien ne se passe.

Cependant, lorsque l'option Code Wrap est définie sur 'onLoad', 'onDomReady' ou 'no wrap-in body', la fonction s'exécute avant le clic et je l'obtiens.

Quelqu'un pourrait-il me dire ce qui me manque?