Créez un objet JavaScript avec un gestionnaire d'événements

Question

J'ai créé un objet JavaScript et l'ai nommé 'Button'. Cet objet a une fonction qui dessine un bouton et l'ajoute à un élément div spécifique.

 var Button = function (id, value) {
        this.id = id;
        this.value = value;           

        this.draw = function () {
            var element = document.createElement("input");
            element.type = "button";
            element.id = id;
            element.value = value;               
            document.getElementById("topDiv").appendChild(element);
        }
    };

Je crée une instance de l'objet Button et appelle la fonction draw() de cette manière :

 var myButton = new Button('btn1', "Bouton Test");
 myButton.draw();

Mon problème est que je ne peux pas gérer les événements. Je veux connecter l'événement onclick à une fonction. Par exemple :

myButton.onClick = function(){ alert(1); };

mais je ne sais pas comment définir cela.

Answer 1

Essayez

var Button = function (id, value) {
    this.id = id;
    this.value = value;           

    this.draw = function () {
        this.element = document.createElement("input");
        this.element.type = "button";
        this.element.id = id;
        this.element.value = value;               
        document.getElementById("topDiv").appendChild(this.element);
    }
};

Button.prototype.addEventListener = function(event, handler){
    var el = this.element;
    if(!el){
        throw 'Pas encore rendu';
    }
    if (el.addEventListener){
        el.addEventListener(event, handler, false); 
    } else if (el.attachEvent){
        el.attachEvent('on' + event, handler);
    }
}

Demo: Fiddle

Answer 2

Je sais que c'est une vieille question mais il vaut la peine de mentionner que vous auriez pu le faire après l'avoir ajouté à la div :

document.getElementById("topDiv").appendChild(element);
this.element.onclick = function(){ alert(1);};

cela est plus cohérent et nécessite beaucoup moins de codage. jsfiddle

Answer 3

Vous devriez créer votre propre méthode click() (qui prend une fonction en paramètre) qui se lie au gestionnaire de clics de l'élément du DOM. Votre méthode draw() peut stocker une référence à l'élément dans l'instance de l'objet afin que votre méthode click() puisse y accéder.

Answer 4

Comme mentionné précédemment, vous devriez attacher des événements aux objets du DOM.

La manière la plus simple est simplement d'exposer votre élément du DOM à partir de votre classe personnalisée :

var Button = function (id, value) {
    this.id = id;
    this.value = value;

    var element = document.createElement("input");
    this.element = element;           

    this.draw = function () {
        element.type = "button";
        element.id = id;
        element.value = value;               
        document.getElementById("topDiv").appendChild(element);
    }
};

Maintenant vous pouvez :

 var myButton = new Button('btn1', "Bouton de test");
 myButton.draw();
 myButton.element.onclick = function(){ alert(1); };

Answer 5

Si Javascript natif....

document.getElementById("btn1").onclick

Si jQuery

$('#btn1').click(//function(){})....

Si jQuery mais le bouton est créé dynamiquement.... Vous pourriez essayer..

$('#btn1').live('click',//function(){ })....

MODIFIER : Comme suggéré dans le commentaire: Veuillez lire ce que dit la documentation:

À partir de jQuery 1.7, la méthode .live() est obsolète. Utilisez .on() pour attacher des gestionnaires d'événements. Les utilisateurs de versions plus anciennes de jQuery devraient utiliser .delegate() de préférence à .live().

Cette méthode fournit un moyen d'attacher des gestionnaires d'événements délégués à l' élément document d'une page, ce qui simplifie l'utilisation des gestionnaires d'événements lorsque le contenu est ajouté dynamiquement à une page. Consultez la discussion sur les événements directs par rapport aux événements délégués dans la méthode .on() pour plus de d'informations.

La réécriture de la méthode .live() en termes de ses successeurs est simple ; voici des modèles d'appels équivalents pour les trois méthodes d'attachement d'événements :

$(selector).live(events, data, handler); // jQuery 1.3+
$(document).delegate(selector, events, data, handler); // jQuery 1.4.3+
$(document).on(events, selector, data, handler); // jQuery 1.7+

ADDITIONNEL Si vous ne pouvez pas vivre sans -live-...

À partir de jQuery 1.4, la méthode .live() prend en charge les événements personnalisés ainsi que tous les événements JavaScript qui se propagent. Elle prend également en charge certains événements qui ne se propagent pas, y compris change, submit, focus et blur.