Méthode d'instance de classe d'appel onclick javascript

Question

J'ai un fichier javascript avec des classes qui contiennent des fonctions de méthode. Je me demandais comment procéder pour appeler une méthode d'instance de classe à partir d'un événement onClick. Comment appeler la fonction DisplayData sur classInstance à partir d'un événement onClick? Par exemple:

<button onClick="classInstance.DisplayData()">Click Me!</button> 

Ce qui ne fonctionne pas, mais m'aide à clarifier ce que je cherche à faire. Aucune suggestion?

Answer 1

http://jsfiddle.net/EyMCQ/1/

Comme vous remarquez, cela ne fonctionne pas, parce que le var vous avez déclaré, reste dans le cadre du bloc d'exécution. Si vous supprimez la variable var, cela fonctionnera car classInstance est maintenant dans la portée globale.

function MyClass() { 
    this.instanceData = "Display Me"; 

    this.DisplayData = function() { 
     alert(this.instanceData); 
    } 
} 

classInstance = new MyClass();​ 

et l'appeler comme ceci:

<button onClick="classInstance.DisplayData.call(classInstance)">Click Me!</button>​ 

http://jsfiddle.net/EyMCQ/2/

Answer 2

Votre code fonctionne très bien en supposant qu'il est à portée globale, sauf que vous ne pouvez pas utiliser document.write après la page est chargée. Donc:

function MyClass() 
{ 
    this.instanceData = "Display Me"; 

    this.DisplayData = function() 
    { 
     alert(this.instanceData); // <=== only change here 
    } 
} 

var classInstance = new MyClass(); 

... fonctionne bien avec votre attribut onclick. Live example | source

document.write est principalement pour l'utilisation pendant le chargement de la page. Si vous l'appelez après le chargement de la page, cela implique un document.open qui efface le document en cours et le remplace par avec le contenu que vous écrivez. Si vous souhaitez ajouter à la page après le chargement de la page, utilisez createElement et appendChild, définissant le contenu de l'élément via innerHTML. Par exemple:

var p = document.createElement('p'); 
p.innerHTML = "Hi there"; 
document.body.appendChild(p); 

... ajoute un paragraphe contenant "Hi there" à la page.

Cependant, je vous invite à ne pas utiliser onclick attributs et tels, notamment parce qu'ils ont besoin d'accéder à des variables et des fonctions globales, et je plaide pour éviter d'avoir des variables globales et fonctions dans la mesure où vous pouvez (et vous pouvez presque évitez-les complètement). Au lieu de cela, utilisez les méthodes modernes de raccordement des gestionnaires d'événements: addEventListener et (pour prendre en charge IE8 et versions antérieures) attachEvent.

donc changer votre exemple pour que cela ne crée pas de GLOBALS:

(function() { 
    function MyClass() 
    { 
     this.instanceData = "Display Me"; 

     this.DisplayData = function() 
     { 
      alert(this.instanceData); 
     } 
    } 

    var classInstance = new MyClass(); 

    // ...and hook it up 
    var button = document.getElementById("theButton"); 
    if (button.addEventListener) { 
     button.addEventListener('click', function() { 
      classInstance.DisplayData(); 
     }, false); 
    } 
    else if (button.attachEvent) { 
     button.attachEvent('onclick', function() { 
      classInstance.DisplayData(); 
     }); 
    } 
    else { 
     // Very old browser, complain 
    } 
})(); 

(. Notez que le nom de l'événement "clic" avec addEventListener, "onclick" avec attachEvent)

Ce prend le bouton ressemble à ceci:

<button id="theButton">Click Me!</button> 

... et que votre code est exécuté après que le bouton a déjà été mis sur la page (par exemple, votre script est at the bottom of the page ou s'exécute en réponse à un événement).

Maintenant, il est difficile de vérifier s'il faut utiliser addEventListener ou attachEvent à chaque fois. En outre, vous pouvez ne pas vouloir tous les éléments avec lesquels vous devez travailler pour avoir un id. C'est là que l'utilisation d'une bonne bibliothèque JavaScript comme jQuery, Prototype, YUI, Closure, ou any of several others est utile. Ils adoucissent les événements (et beaucoup d'autres idiosyncrasies) pour vous, et fournissent des fonctionnalités utiles pour localiser les éléments autrement que par id (dans la plupart des cas, prenant en charge presque tous les sélecteurs CSS, même sur les anciens navigateurs qui n'ont pas querySelector/querySelectorAll construit en

Answer 3

Toutes les réponses ci-dessus semblent trop compliquer la situation un peu

J'utilise simplement ceci:..

MyClass = new function() { 
    this.instanceData = "Display Me"; 

    this.DisplayData = function() { 
     alert(this.instanceData); 
    }; 
}; 

Et voici le bouton:

<button onClick="MyClass.DisplayData()">Click Me!</button> 

Et est un violon ici que la démonstration: Fiddle