addEventListener et objet avec this Résolu

Question

Bonjour, J'ai beau rechercher partout, je ne trouve pas la solution ! J'ai tout essayé mais rien n'y fait. Alors, voila, je souhaite ajouter une fonction à la liste des evenements, mais hélas, le mot clé this qui est à l'intérieur de cette fonction se réfère au div et non a mon objet ! Essayez ceci : TESTI TESTI TESTI Lorsque vous cliquez vous vous rendez compte que la variable this.id vaut "testia", soit l'id du div ! Et que la variable this.titre est indéfinie. Donc, moi ce que je souhaite c'est pouvoir acceder par exemple à la variable titre de mon objet. Savez vous comment faire ? Car c'est fou ce qu'il n'y a pas d'informations la dessus. Ha si, j'ai vu une solution qui consitait a mettre dans des tableaux... je trouve pas ça top... Merci.

ralecul · Accepted Answer

Salut,

Voici une solution :

monObjet.prototype.iniT = function(id,titre){
    // Variables.
    this.id = id;
    this.titre = titre;
    var test = document.getElementById('testia');

    var that = this;
 
    if (test.addEventListener)
            test.addEventListener('click', function() { that.affMonID(); },  false);
    else if (test.attachEvent)
            test.attachEvent('onclick', function() { that.affMonID(); });
}

De nombreux problèmes :
- impossible de retirer les event  : removeEventListener / detachevent ne marche pas avec une fonction anonyme.
- code dupliqué pour l'ajout de l'event : on peut faire facilement une méthode d'ajout d'event cross-browser :

//Equivalent simpliste de Event.observe(element, eventName, handler[, useCapture = false]) de prototype.js
function addEvent(element, eventName, callback)
{
   if (element.addEventListener)
      element.addEventListener(eventName, callback, false);
   else if (element.attachEvent)
      element.attachEvent('on'+eventName, callback);
}

Donc dans ton objet celà devient :
addEvent(test, "click", function() { that.affMonID(); });

//Avec prototype :
Event.observe(test, "click", function() { that.affMonID(); }, false); //non testé

@+

Shinji49 · Answer

A ce propos, j'ai regardé du coté de Call pour faire passer la référence de mon objet mais sa n'a pas l'air de fonctionner.

nicomilville · Answer

Salut,

Regarde du côté de prototype et fait une recherche sur le binding !

a++

Si la réponse vous convient, pensez : Réponse accepté !

Shinji49 · Answer

nicomilville : tu me parle de prototype -> le framework ? Ou de la methode prototype ?

ralecul : ta solution fonctionne ! C'est comme même fou que ce soit mal foutu a ce niveau Javascript ! lol Bref, je m'en contente. Par contre, au niveau des problème, je comprend pas trop ? Comment sa code dupliqué ?

Cross-browser signifie compatible tout navigateur ?

Merci !

nicomilville · Answer

Je te parle du framework prototype, normalement il fournis deux methode pour le binding :

par exemple bind enfin un truc comme ça !

a++

Si la réponse vous convient, pensez : Réponse accepté !

AddEventListener et objet avec this

5 réponses

Votre réponse

Discussions similaires