begin process at 2012 02 12 20:58:24
  Trouver un code source :
 
dans
 
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

JavaScript Orienté objet (POO)

 > 

Evènements

 > 

addEventListener et objet avec this


Derniers messages déposésPoser une question dans le forum ou lancer une discussion

addEventListener et objet avec this

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ée 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 'length' a la valeur null ou n'est pas un objet [ par sidarks ] Bonjour, Je rencontre un souci avec une fonction en JS. [b]Le contexte :[/b] Je souhaite à l'aide d'un menu déroulant, choisir quelles colonnes d'un 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


Nos sponsors


Sondage...

CalendriCode

Février 2012
LMMJVSD
  12345
6789101112
13141516171819
20212223242526
272829    

Consulter la suite du CalendriCode

Photothèque

 
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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 1,232 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales