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 :

[Article] Présentation des événements du DOM


Sujet :

JavaScript

  1. #1
    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 : 53
    Localisation : France, Gironde (Aquitaine)

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

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut [Article] Présentation des événements du DOM


    hornetbzz vous propose son premier article : Présentation des événements du DOM.

    L'objectif de cet article, relativement exhaustif, est de permettre de comprendre comment manipuler les évènements DOM en Javascript.
    A mon sens, il a largement atteint son objectif !

    N'hésitez pas à faire part de vos remarques, questions et encouragements à la suite de ce message.

    Merci à lui
    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

  2. #2
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut \o/
    L'initative est très bonne. Merci hornetbzz.
    Je n'ai pas tout lu mais j'ai vu qu'il y avait même des exemples de code, ce qui aide à la visualisation précise des problèmes que l'on peut rencontrer.

    Je doit relire plus attentivement le passage avec l'exemple à ne surtout pas reproduire car je n'ai pas vu explicitement le pourquoi du comment et la solution adéquate mais j'ai sauté des paragraphes donc je suppose que ma réponse s'y trouve.

    La conclusion est à rappeler autant que faire ce peut car on ne le dira jamais assez.

    Courage pour les prochains articles.

  3. #3
    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
    Points : 4 835
    Points
    4 835
    Par défaut
    Très bon article et très complet !!
    est ton ami fait gagner du temps à ceux qui aident , donc un message avec la balise résolu laisse plus de temps pour résoudre d'autres problèmes

    Premier ministre du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts )

  4. #4
    Membre éclairé
    Avatar de hornetbzz
    Homme Profil pro
    Directeur commercial
    Inscrit en
    Octobre 2009
    Messages
    482
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France

    Informations professionnelles :
    Activité : Directeur commercial

    Informations forums :
    Inscription : Octobre 2009
    Messages : 482
    Points : 773
    Points
    773
    Par défaut
    Merci pour ces commentaires encourageants.

  5. #5
    Membre averti
    Avatar de tzilliox
    Homme Profil pro
    Développeur Web
    Inscrit en
    Avril 2007
    Messages
    153
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 38
    Localisation : France, Rhône (Rhône Alpes)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Avril 2007
    Messages : 153
    Points : 398
    Points
    398
    Par défaut Merci
    Article Impressionnant ! Merci hornetbzz.

    Je rajouterais les balises A pour les événements onfocus et onblur. On y pensse très rarement. Mais pour l'accessibilité et la navigation au clavier, c'est mieux d'y penser

    Plein de courage pour tes prochains articles,
    Thomas.

  6. #6
    Membre à l'essai
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 35
    Points : 24
    Points
    24
    Par défaut
    Je débute dans le Js et le Dom, très clair et intéressant, merci, bonne continuation.

    Pour le dernier exemple (5-E-1-C), je ne vois rien de particulier se produire (sous FF3.6.3).
    On devrait avoir un message alert et aller au lien de la page html juste en passant la souris sur le texte, c'est ça ?

  7. #7
    Membre éclairé
    Avatar de hornetbzz
    Homme Profil pro
    Directeur commercial
    Inscrit en
    Octobre 2009
    Messages
    482
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 56
    Localisation : France

    Informations professionnelles :
    Activité : Directeur commercial

    Informations forums :
    Inscription : Octobre 2009
    Messages : 482
    Points : 773
    Points
    773
    Par défaut
    Bonjour,

    @Thoams: oui bonne remarque. Mais dans ce cas, quand on parle de DOM event, c'est dans le chapitre 5-A-2 que cela se passe, et aussi le chapitre 5-E. Et plus particulièrement, voir l'interface UIEvent.

    @berlo44
    Pour le dernier exemple (5-E-1-C), je ne vois rien de particulier se produire (sous FF3.6.3).
    Tu as un lien hypertexte. Sans ajouter de gestionnaire, on devrait donc simplement voir ce lien cliquable, bien sûr pouvoir le cliquer, et c'est tout.

    Or on lui ajoute un gestionnaire comme expliqué dans le texte juste après le code:
    On créé un évènement mouseover sur l'élément cible constitué par le lien hypertexte de la balise <a>, identifiée par son identifiant id= « mon_lien ». Lorsque cet évènement est déclenché, en passant sur le lien, le gestionnaire crée à son tour un objet évènement fictif « mouseup ». Puis on affecte cet objet "évènement fictif" à la cible. Le gestionnaire GestionEvtFictif de cet objet évènement fictif affiche les paramètres de l'objet évènement fictif.
    L'effet visible (y compris dans FF3.6):
    le lien <a> n'est plus cliquable. Par contre, le survol du lien engendre l'apparition de la fenêtre pop-up. C'est ce que tu devrais observer.

  8. #8
    Membre à l'essai
    Profil pro
    Inscrit en
    Mars 2007
    Messages
    35
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2007
    Messages : 35
    Points : 24
    Points
    24
    Par défaut
    trouvé !

    c'est la ligne :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    var s = '', propriete=',type,target,currentTarget,bubbles,cancelable,windowObject,
    	detail,screenX,screenY,clientX,clientY,ctrlKey,altKey,shiftKey,metaKey,
    	button,relatedTarget,';
    écrite ainsi sur plusieurs lignes ça ne passe pas, firefox ne signal pas l'erreur, ie8 si (Message*: Constante chaîne non terminée Ligne*: 74 Caractère*: 91).

  9. #9
    Membre éprouvé

    Profil pro
    Inscrit en
    Janvier 2010
    Messages
    981
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Janvier 2010
    Messages : 981
    Points : 1 028
    Points
    1 028
    Billets dans le blog
    36
    Par défaut
    Merci à tout le collectif pour cet article très pédagogique, permettant de bien comprendre le phénomène de propagation (bubbling) dans le DOM et comment l'inhiber.
    Mal nommer un objet, c'est ajouter au malheur de ce monde, car le mensonge est justement la grande misère humaine, c'est pourquoi la grande tâche humaine correspondante sera de ne pas servir le mensonge
    Poésie 44, n° 17 - Albert Camus

    Mes réponses vous ont aidés, un clic sur leur pouce vert
    Bonjour chez vous

Discussions similaires

  1. Réponses: 5
    Dernier message: 25/05/2011, 14h35
  2. Réponses: 0
    Dernier message: 19/05/2011, 09h59
  3. Réponses: 0
    Dernier message: 19/05/2011, 09h59
  4. [DOM] Gestion des événements avant l'existence d'un élément
    Par Cladjidane dans le forum Général JavaScript
    Réponses: 16
    Dernier message: 04/11/2008, 14h24

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