begin process at 2010 03 22 14:46:11
  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 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 '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 Problème de récupération de valeures AJAX [ par fogof ] Bonjour, J'ai un petit soucis, j'ai une fonction pour effectuer une requète en AJAX : [code=js]function recup_libelle_rubriques(id_rubrique_recherch Problème expression régulière [ par NicoIRIS ] Bonjour, je souhaite vérifier la bonne conformité d'une adresse mac renseigné par un utilisateur. Pour ce faire, je split ma chaine sur les : je mets Autocompleter et problème de paramètre non rafraichi [ par glachant ] Bonjour,voilà j'ai un probleme avec mes paramètres de "autocompleter"... j'ai une liste de pays (<select id="ctrynum"..) et un champ ville (imput type changement de l'évènenement onclick [ par bernidupont ] Bonsoir à tous, savez vous comment change t on la valeur d'un bouton par exemple qui possède la valeur onclick? voici un exemple très simple d'una pa


Nos sponsors


Appels d'offres

Sondage...

Comparez les prix

CalendriCode

Mars 2010
LMMJVSD
1234567
891011121314
15161718192021
22232425262728
293031    

Consulter la suite du CalendriCode

 
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 : 3,229 sec (4)

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