2013-01-11 3 views
0


Je semble avoir des problèmes de portée avec l'utilisation de addEventListener à l'intérieur d'une fonction anonyme immédiate.

A l'intérieur de l'écouteur d'événement, je crée une instance d'une "classe" Javascript qui est construite en dehors de la fonction immédiate (en utilisant un constructeur et prototype). En essayant de garder les bonnes pratiques, j'ai voulu utiliser la fonction immédiate pour éviter les variables globales, et addEventListener pour éviter d'utiliser le Javascript intégré (le séparant ainsi de html).

Alors, comment puis-je le faire correctement sans avoir de problèmes de portée, et quelles sont les bonnes pratiques pour le faire? problèmes de portée avec les événements: Quelles sont les bonnes pratiques pour éviter Javascript en ligne?


Voici mon html:

<html> 
    <head> 
     <title>asdf</title> 
    </head> 
    <body> 
     <input type = "text" id = "userInput" /> 
     <input type = "button" id = "submitButton" value = "submit" /> 

      <script type = "text/javascript" src = "asdf.js" /> 
    </body> 
</html> 


... et voici mon Javascript asdf.js (qui est pas de travail):

// constructor for object-oriented processing of the user input 
function Statement(expression) 
{ 
    this.expression = expression; 
} 
    // instance method 
    Statement.prototype.checkSyntax = function() 
    { 
     var newExp = this.expression; 

     return newExp; 
    }; 

// immediate anonymous function 
(function() 
{ 
    var submitButton = document.getElementById("submitButton"); 

    // event listener for the submit button 
    submitButton.addEventListener("onclick", function(event) 
    { 
     var userInput = document.getElementById("userInput"); 

     // creating a new object with constructor above 
     var expr = new Statement(userInput); 

     // calling instance method of the "class" Statement 
     alert(expr.checkSyntax()); 

     // disable the button after first use 
     event.stopImmediatePropagation(); 
    }, false); 

})(); // end of immediate anonymous function 
+0

Vous peut définir la classe à l'intérieur de la fonction immédiate, en créant effectivement une portée fermée. –

+0

Je ne vois aucun problème de portée. Quelles erreurs obtenez-vous? – Bergi

+2

Je ne peux m'empêcher de rire de @ Soupd'Campbells commentant la question de Ian _Cambell_. Laisser votre soupe faire des commentaires sur votre propre question semble discutable;) – jahroy

Répondre

1

addEventListener prend un argument comme click, pas onclick. Cependant, les anciens IE attachEvent nécessitent onclick. Tout le reste semble bien.

+1

Encore une chose: 'var userInput = document.getElementById (" userInput ")' manque '.value'. – bfavaretto

+0

@bfavaretto droite, totalement raté cela! –

+0

@Kolink ah, 'click' au lieu de' onclick' ... c'est bizarre, y a-t-il d'autres arguments d'événements similaires, comme 'blur' au lieu de' onblur'? –

1

mon Javascript qui ne fonctionne pas

Il pourrait y avoir des problèmes, mais aucun n'a à voir avec le (AMHA inutile) IEFE:

  • addEventListener a besoin du nom de l'événement sans "on" - Ce n'est que M $ bizarreries en attachEvent.
  • Assurez-vous que votre JS exécute après les éléments DOM sont créés - sinon submitButton sera null
  • Je suppose que vous voulez passer une chaîne au constructeur Statement, pas le nœud <input> DOM - utiliser userInput.value
+0

merci pour l'aide. Si IEFE (* Expression de fonction immédiatement invoquée *) n'est pas nécessaire, comment puis-je faire quelque chose de similaire pour éviter les variables globales? –

+1

Ah, oui, vous l'avez utilisé pour éviter les variables globales (mais avez déclaré 'Statement' globalement). Dans votre cas, vous pouvez simplement omettre la variable 'submitButton' et directement' document.getElementById ("submitButton"). AddEventListener (...) ' – Bergi

+1

@IanCampbell Vous pouvez également ajouter une fonction anonyme en tant qu'écouteur d'événement pour l'événement DOM ready. En outre, IEFE est une bonne pratique pour protéger vos fonctions et les définitions de classe (pour lesquelles vous ne l'utilisez pas pour le moment), en particulier dans les cas où vous pourriez avoir des scripts tiers ou des vulnérabilités d'injection de script. –

Questions connexes