Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

Sujet : addEventListener et objet avec this [ JavaScript Orienté objet (POO) / Evènements ] (Shinji49)

mercredi 21 mai 2008 à 18:35:10 | addEventListener et objet avec this

Shinji49

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 :

<script type="text/javascript">
monObjet= function(args){
    // Appel méthode : initiatilisation.
    this.iniT(args.id, args.titre || 'defaut');
}

// Méthode : initialisation.
monObjet.prototype.iniT = function(id,titre){
    // Variables.
    this.id = id;
    this.titre = titre;
    var test = document.getElementById('testia');

    /* Evènements *************************************************************/
    this.navig = navigator.appName;
    if(this.navig =='Microsoft Internet Explorer'){
            test.attachEvent('onclick',this.affMonID);
    }else{
            test.addEventListener('click',this.affMonID,false);
    }
    /**************************************************************************/
}
monObjet.prototype.affMonID = function(){
    alert(this.id);
    alert(this.titre);
}
</script>

<div style="padding:10px; background-color:red;" id="testia">TESTI TESTI TESTI</div>

<script type="text/javascript">
var testi = new monObjet({id:'testi', titre:'test'});
</script>

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.

mercredi 21 mai 2008 à 18:37:21 | Re : addEventListener et objet avec this

Shinji49

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.

mercredi 21 mai 2008 à 19:07:08 | Re : addEventListener et objet avec this

nicomilville

Membre Club
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é !


mercredi 21 mai 2008 à 19:26:20 | Re : addEventListener et objet avec this

ralecul

Réponse acceptée !
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é

@+

mercredi 21 mai 2008 à 21:12:29 | Re : addEventListener et objet avec this

Shinji49

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 !

jeudi 22 mai 2008 à 07:11:41 | Re : addEventListener et objet avec this

nicomilville

Membre Club
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é !




Cette discussion est classé dans : objet, test, titre, id, monobjet


Répondre à ce message

Sujets en rapport avec ce message

infobulle sous différant navigateur [ par Thundrax ] Hello,Alors mon problème est simple, j'ai le script de Greengold pour faire de joli info bulle perso, c magique mais ca ne fonctionne que sous-ie... é Test existence d'un objet [ par donben ] Bonjour, je cherche à tester l'existence d'une cellule de tableau créé via PHP par son ID. Je fais donc une fonction bête écrite comme suit par un aut Programmation objet et attachement d'evenement [ par MaX3315 ] Bonjour à tous,Voici de façon simplifiez mon problème.function monObjet(id){    this.id=id;    this.div=document.getElementById(id);   this.overDiv=ov Nom d'un objet en parametre [ par Rael87 ] Voila mon probleme, j'envois le nom d'une checkbox en parametre de ma fonction test, le but etant de cocher toute les checkbox ayant ce nom.Voici ma f Ma fonction ne tient pas compte de l'id passé en paramètre [ par beegeezzz ] Bonsoir,J'appelle une fonction javascript en lui passant la valeur d'une zone de texte et son ID :onblur="verif(this.value,id)"mon script est le suiva remplir plusieurs champs avec une checkbox [ par jul_diedhiou ] bonjour à tous et à toutes, Je voudrais savoir comment remplir tous les champs d'un formulaire ,à l'identique d'autre champs, par le biais d'une che cree une liste deroulante liee entre elle [ par simonano ] Bonjour , j'aimerai crée deux  liste déroulante liée entre elles sur 2 table (module , matière) lors de clique sous la premiere liste , je veux avoir javascript / Menu horizontal dynamique [ par Neiflheim1 ] Bonjour à tous,Ca fais bien 3-4jours que je cherche en vain la solution à mon probleme. Mon menu dynamique marche, mais l'image de fond ne s'affiche p Probléme lié a systeme de drag & drop avec un ul/li [ par destiny ] bonjour,tout d'abort, la liste : ul class="capsulMenuAdminOrder" <span class="attribute-nam recup de variable depuis URL > objet flash [ par ReaseT ] Bonjour à tous,voila, je connais très mal javascript mais j'ai un besoin particulier, je voudrias recuperer une variable en url por la reinjecter dans


Nos sponsors

Sondage...

CalendriCode

Juillet 2009
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
2728293031  

Consulter la suite du CalendriCode

Téléchargements

Logiciels à télécharger sur le même thème :

Comparez les prix Nouvelle version

Photothèque Nouveau !



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,406 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.