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 :

[DOM] Gestion des événements avant l'existence d'un élément


Sujet :

JavaScript

  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 35
    Par défaut [DOM] Gestion des événements avant l'existence d'un élément
    Bonjour

    Je suis souvent confronté à un soucis que je zappe par des manières détournées. Mais aujourd'hui j'ai décidé de m'y intéresser et d'approfondir le sujet. Je commence par poser ma question ici :

    comment poser une gestionnaire d'évènement sur un élément avant son existence?

    J'avais envisagé qu'a l'instar d'une fonction telle body=onload(genre body=mutation), on pouvait surveiller le DOM et qu'a chaque mutation on rendrait le gestionnaire d'évènements actif sur un élément qui n'existait pas au load de la page...

    Il existe bien des infos : http://www.w3.org/TR/DOM-Level-2-Eve...mutationevents, mais j'avoue avoir du mal à comprendre, ne maitrisant pas assez la gestion des Events

    Si j'ai des réponses montrant l'intérêt de ce sujet. J'approfondis avec un exemple.

    Merci de vos avis

    Fab

  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 : 55
    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
    comment poser une gestionnaire d'évènement sur un élément avant son existence?
    C'est pas possible.
    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 chevronné Avatar de d-Rek
    Homme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2007
    Messages
    438
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Nord (Nord Pas de Calais)

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Janvier 2007
    Messages : 438
    Par défaut
    Je dirai même que c'est impossible.

    Aujourd'hui je repasse derrière tous les messages de Bovino

  4. #4
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    tu peux appeler à intervalle régulier avec setInterval() une fonction récursive qui scrute le DOM et ajoute des gestionnaires ou autre aux nouveaux éléments.

    genre
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    function addEvent(element, tag, type, callback){
      if (element.nodeName==tag && !element.wasInitialized){
        if (element.attachEvent){
          element.attachEvent("on"+type, callback);
        }
        else if (element.addEventListener){
          element.addEventListener(type, callback, false);
        }
        else{
          element["on"+type] = callback;
        }
     
        element.wasInitialized = true;
      }
     
      if (element.hasChildNodes()){
        var next = element.firstChild;
        while (next){
          addEvent(next, tag, type, callback);
          next = next.nextSibling;
        }
      }
    }

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 35
    Par défaut
    C'est très approfondi comme réponse

    Moi qui cherchais justement... à approfondir.

    La dernière réponse est mieux


    Sur la dernière justement, comme je disais plus haut, rien n'existe qui s'exécute à la modification du DOM?, je sais pas si vous avez lu mon lien sur "Mutation event types"

  6. #6
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    connais pas. mais c'est du DOM niveau 2, ya de fortes chances que ça ne soit pas compatible avec tous les navigateurs (j'ai l'impression que IE ne le supporte pas)

  7. #7
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 35
    Par défaut
    Je ferais part de mes recherches

  8. #8
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    pourquoi ne pas faire une fonction perso d'ajout d'objet DOM qui inclue l'ajout des evenements?
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  9. #9
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 35
    Par défaut
    Comme par exemple, on crée un élément qu'on injecte dans le DOM, et en même temps on lui affecte un évènement? C'est ce qui me gêne en réalité

    Un exemple très rapide, au load de la page on boucle sur les éléments possédant une class "untel", et on leur affecte un gestionnaire d'évènements au click. Si j'ajoute à un moment un élément avec une classe "untel" dans le DOM, je devrais réaffecter mon gestionnaire à ce nouvel élément. Je trouve ça très lourd. C'est le pourquoi de ma question initial.

    Merci de vos avis en tout cas

  10. #10
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    Mars 2002
    Messages
    39 659
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 75
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : Mars 2002
    Messages : 39 659
    Billets dans le blog
    1
    Par défaut
    non tu peux tout simpelement faire une fonction générique qui attribue calss et evenements en même temps ...


    jette un oeil sur ce post:
    http://www.developpez.net/forums/d53...ynamique-form/
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

  11. #11
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    je ne vois pas en quoi c'est lourd, mais bon soit...
    pourquoi ne pas gérer les événements au niveau d'un conteneur principal? il décidera de l'action à mener en fonction de qui l'aura déclenché

  12. #12
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 35
    Par défaut
    Je dis que c'est lourd car je suis sur un projet ou je dois être pas loin des 3000/4000 lignes de js, donc si jeux factoriser au maximum, ça m'arrange.

    Merci pour le lien, c'est intéressant.

  13. #13
    Membre Expert
    Avatar de ThomasR
    Homme Profil pro
    Directeur technique
    Inscrit en
    Décembre 2007
    Messages
    2 230
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Décembre 2007
    Messages : 2 230
    Par défaut
    Je dis que c'est lourd car je suis sur un projet ou je dois être pas loin des 3000/4000 lignes de js, donc si jeux factoriser au maximum, ça m'arrange.
    Bonjour,


    Dans tous les cas c'est ce qu'il faudrait faire,
    lorsque tu veux ajouter un évenement à tous les éléments qui ont tel classe. Tu parcours tous ces éléments et tu leur associe chacun l'évenement en question.

    Donc lorsque tu rajoutes un élément dans le DOM, par définition, à cet élément il n'y a aucune raison d'associer nativement un évenement (en dépit de sa classe).

    Si tu regardes des outils comme lightbox, lorsque tu rajoutes dynamiquement un lien celui-ci n'est pas pris en compte par lightbox.

    Quoi de plus normal, une solution plausible comme celle expliquée plus haut serait d'effectuer un appel récusif d'une fonction chargée d'associer un évenement aux éléments possédant tel ou tel classe. Bonjour les performances :p

  14. #14
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 35
    Par défaut
    Citation Envoyé par ThomasR Voir le message
    ...

    Donc lorsque tu rajoutes un élément dans le DOM, par définition, à cet élément il n'y a aucune raison d'associer nativement un évenement (en dépit de sa classe)....
    Prenons un autre exemple(on va étoffer un peu) :

    1. Un form de recherche
    2. Un listing de resultat


    le listing de resultat et rempli via une requete xhr

    Je crée un objet js avec propriété et méthode diverses(que j'instancie au load de la page), une des méthodes de cet objet me permet de gérer le clic sur un élément du listing de résultat.

    ça ne fonctionnera pas, logique puisque les résultats n'existant pas encore au load de la page, ils ne peuvent avoir d'évènements associés.

    Alors évidement, il existe différentes solutions à ce cas de figure.
    Mais cela impose de ne plus se servir uniquement de l'objet crée et d'ajouter du js à tour de bras.

    Moi je cherche le meilleur moyen pour que mon objet s'occupe de tout. Sans ajout de bout de js.

  15. #15
    Rédacteur
    Avatar de bigboomshakala
    Homme Profil pro
    Consultant Web .NET
    Inscrit en
    Avril 2004
    Messages
    2 077
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 45
    Localisation : France, Val de Marne (Île de France)

    Informations professionnelles :
    Activité : Consultant Web .NET
    Secteur : Finance

    Informations forums :
    Inscription : Avril 2004
    Messages : 2 077
    Par défaut
    je calcule pas. mais (hypothèse) peut-être as-tu un ch'ti soucis de conception ?

  16. #16
    Membre Expert
    Avatar de ThomasR
    Homme Profil pro
    Directeur technique
    Inscrit en
    Décembre 2007
    Messages
    2 230
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Directeur technique
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Décembre 2007
    Messages : 2 230
    Par défaut
    J'ai bien compris ton exemple, mais ca ne change strictement rien à ce que je dis. Nativement un objet, en dépit de sa classe, n'a pas à être associé à un évenement. C'est une entité qui est associé à un évenement et non un groupe d'entités. Je veux dire par là que le DOM n'en a pas prévu l'intérêt de facon natif.

    Moi je cherche le meilleur moyen pour que mon objet s'occupe de tout. Sans ajout de bout de js
    Je ne crois pas que ce soit possible de facon fully-compatible, comme tu l'as compris le délire serait d'ajouter ton élément au DOM puis d'associer un évenement à ce dernier.

    Si tu veux vraiment te lancer dans cette solution, tu peux "catcher" l'évenement DOMNodeInserted.

    Pour en savoir plus regarde auprès des Mutation Events :

    http://www.w3.org/TR/DOM-Level-2-Events/events.html

  17. #17
    Membre averti
    Profil pro
    Inscrit en
    Octobre 2006
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Octobre 2006
    Messages : 35
    Par défaut
    Je crois que des exemples valent mieux que de grand discours.

    Je me suis servi de mootools pour simplifier le code.

    http://www.evernet-studio.com/test/

    edit : pour mutation event c'est ce que je mettais en avant au début de ce post

Discussions similaires

  1. Gestion des évènements Netscape 7.0
    Par RATHQUEBER dans le forum Autres langages pour le Web
    Réponses: 6
    Dernier message: 19/12/2005, 16h26
  2. Problème avec la gestion des événements
    Par CynO dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 17/10/2005, 10h07
  3. [JTable] gestion des événements
    Par soulhouf dans le forum Composants
    Réponses: 4
    Dernier message: 19/08/2005, 13h21
  4. Gestion des évènements lors d'un clique sur une image.
    Par yoghisan dans le forum Débuter
    Réponses: 7
    Dernier message: 23/06/2005, 19h04

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