IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Event.observe (plusieurs objets)


Sujet :

JavaScript

  1. #1
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut Event.observe (plusieurs objets)
    Bonjour, je me questionne

    Citation Envoyé par le_chomeur Voir le message
    le Event.observe , est utile lorsque tu utilises la même méthode sur X objet , si tu dois utiliser ta méthode sur un seul objet alors reste sur le onclick
    J'aimerais savoir comment on peut appliquer Event.observe sur plusieurs objets alors qu'il faut passer le ID de l'objet comme 1er paramètre et que chaque objet doit avoir un ID différent...

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Le code fourni montre l'utilisation du framework Prototype (évocation de Event.observe plutôt que event.observe), qui permet justement de faciliter les traitements multiples par exemple:
    $$('class').each(function(iterateur){iterateur.observe('click', fonction});

    A noter que la fonction ne prend pas forcément de paramètres et n'oblige pas les parenthèses. Le $$ correspond à une fonction getElementsByClassName
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut
    Ce genre de trucs est plutôt nouveau pour moi alors je vais reformuler pour voir si j'ai bien compris.

    $$('class') permet d'appliquer l,observateur d'événement sur tous les objets de classe "class".

    l'itérateur, quant à lui, est égal à chacun des ID des objets ciblés.

    Est-ce bien ça?

  4. #4
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Oui, c'est ça :
    Le $$ récupère effectivement tous les éléments de classe "class",
    le each fait une boucle sur chacun d'eux
    iterateur est la référence à l'élément en cours de traitement

    Et dans tout ça, aucun élément n'a besoin d'id !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  5. #5
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut
    donc l'itérateur est un objet!

    Je sent que ça risque de m'aider à optimiser la taille de mes documents HTML du genre liste de 8000 éléments...

  6. #6
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut
    'Event' est indéfini

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    Event.observe(window, 'load', function() {   
      $$('cellblank').each(function(obj) {obj.observe('click', check(getPieceFromID(obj)))});
    });
    QU'est-ce qui ne va pas avec ça?

    Si je met event en minuscule alors j'ai le message

    'event' à la valeur 'Null' ou n'est pas un objet.

    Je n'ai pas cerné la différence encore entre Event et event mais néanmoins je crois que c'est le 'Event' qu'il faut utiliser dans ce cas selon ce que j'ai pu voir lors de mes recherches.

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 54
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Billets dans le blog
    20
    Par défaut
    Non, l'itérateur n'est pas un objet.
    $$ est (au sens de prototype) un 'enumerable' un tableau en résumé, même si c'est un peu plus complexe que ça, mais dans ce cas, c'est assimilable à un tableau d'éléments.
    itérateur est du coup le pointeur qui marque l'élément que tu traites actuellement.


    Imagine un tableau que tu génères via par exemple un getElementsByTagName, il s'agit donc bien d'un tableau d'éléments.
    Tu construis ensuite une boucle for i=0 i<getElementsByTagName.length, i++ et pour chaque boucle tu traites la valeur getElementsByTagName[i]...

    Dans notre cas, each est ta boucle qui traite tout le tableau et iterateur correspond, avec le même nom d'appel à chaque getElementsByTagName[i].

    Je ne suis pas sûr d'avoir été suffisamment clair, donc n'hésites pas à poser des questions sur ce que tu n'as pas compris...

    Dans ton appel, ce qui ne vas pas c'est que le dernier argument est censé être un appel à une fonction, pas la fonction elle-même.

    Pour appeler Event (un objet du framework Prototype), il faut au préalable avoir chargé Prototype.js.
    La différence entre event et Event, c'est que event est un objet natif javascript et en particulier un de ceux qui sont les moins compatibles entre navigateurs.
    Le but de prototype dans ce genre de cas étant de donner une syntaxe unique gérant tous les navigateurs. (event.observe pour ff et event.attachEvent pour ie entre autre)
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut
    Je crois avoir bien saisi ce que tu viens d'expliquer, je me suis aussi documenté un peu sur getElementsByTagName et sur les "tableaux d'itérateurs". Le problème qui se pose, c'est que je ne sais pas comment l'appliquer au code qui me concerne.

    J'ai d'abord testé mon code basé sur du code que j'ai trouvé dans un tuto. et le fait de déclarer la fonction à même les paramètres n'empêche pas le fonctionnement de la dite fonction.

    Le code que je poste ici ne fonctionne pas, lorsque je remplace la ligne 5 par test(); j'ai bien un message lors du chargement de la page mais je n'ai pas réussi à faire fonctionner mes observateurs d'événements grâce au code qui est présentement à la ligne 5. Qu'est-ce qui cloche?

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    0 function test() {
    1   alert("Test");
    2 }
    3
    4 Event.observe(window, 'load', function() {   
    5   $$('cellblank').each(function(pointeur) {pointeur.observe('click', test())});
    6 });

  9. #9
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    c'est censé faire quoi ça :

    $$('cellblank').each(function(pointeur) ??

  10. #10
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut
    Basé sur ce post, ma compréhension n'est peut-être pas correcte. Peut-être que je ne dois pas spécifier ici le nom de la class que je recherche mais je me suis dit que c'était l'endroit logique pour le faire.

    Citation Envoyé par Bovino Voir le message
    Le code fourni montre l'utilisation du framework Prototype (évocation de Event.observe plutôt que event.observe), qui permet justement de faciliter les traitements multiples par exemple:
    $$('class').each(function(iterateur){iterateur.observe('click', fonction});

    A noter que la fonction ne prend pas forcément de paramètres et n'oblige pas les parenthèses. Le $$ correspond à une fonction getElementsByClassName

  11. #11
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    excuse moi j'aurais du préciser :

    function(iterateur){iterateur.observe('click', fonction}

    sur ta méthode $$('cellblank') avant de faire ton each , as tu une collection ?

    ensuite sur $$('cellblank').each(); essaye de faire un alert avec une propriété de tes objets

    puis as tu un objet de type iterateur quelque part ??

    tout ces points sont a vérifier pour cerner l'erreur

  12. #12
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut
    1 - Ok alors où dois-je spécifier la classe des objets ciblés?

    2 - prototype-1.6.0.2.js

    3 - J'ignore comment obtenir les propriétés de mes objets puisque je ne sais pas comment les récupérer jusqu'à maintenant. Si je comprends bien, il faudrait d'abord que j'aie déclaré un objet de type itérateur pour pouvoir m'en servir.

    4 - Non, je n'ai pas déclaré d'objet de type itérateur... comment faire?

  13. #13
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut
    D'accord alors une seule question simple : Comment définit-on un itérateur?

  14. #14
    Expert confirmé
    Avatar de le_chomeur
    Profil pro
    Développeur informatique
    Inscrit en
    Février 2006
    Messages
    3 653
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Développeur informatique

    Informations forums :
    Inscription : Février 2006
    Messages : 3 653
    Par défaut
    les itérateurs ne sont pas encore pris en comptes par tous les navigateurs , aussi essaye d'utiliser une méthode :

    http://webreflection.blogspot.com/20...and-other.html

  15. #15
    Membre éclairé Avatar de FrankOVD
    Homme Profil pro
    Directeur des systèmes d'information
    Inscrit en
    Juin 2005
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Canada

    Informations professionnelles :
    Activité : Directeur des systèmes d'information
    Secteur : Biens de consommation

    Informations forums :
    Inscription : Juin 2005
    Messages : 438
    Par défaut
    ouff... ça devient trop compliqué pour moi ces trucs là, alors cet itérateur pourrait servir dans la situation présenté plus haut? ... Hmm je vais peut-être essayer d'improviser quelque chose plus tard dans la journée mais j'avoue que j'ai présentement plein d'outils en main dont la forme et l'utilité me sont plutôt inconnus.

Discussions similaires

  1. [C#] Plusieurs objets en Remoting
    Par davestar dans le forum Windows Forms
    Réponses: 2
    Dernier message: 24/07/2006, 15h04
  2. m3g : utilisation de plusieurs objets en même temps
    Par chabfive dans le forum Développement Mobile en Java
    Réponses: 1
    Dernier message: 23/06/2006, 14h00
  3. [Débutant - JAVASCRIPT] L'objet event et l'objet xEvent
    Par sempire dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 08/11/2005, 15h33
  4. Requêtes : recherche de maxi sur plusieur Objet
    Par pertuis dans le forum Langage SQL
    Réponses: 6
    Dernier message: 08/03/2004, 15h28
  5. Comment mettre plusieurs objets ds un composant ?
    Par Fleury dans le forum Composants VCL
    Réponses: 7
    Dernier message: 24/05/2003, 17h34

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo