Et voici la suite du cours précédent consacré aux événements avec le Framework Dojo.
Maintenant, vous allez utiliser la gestion avancée des événements Dojo.
Tout est dans la formation ci-dessous.
[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]
La technique pour utiliser les événements avancés avec le Framework Dojo
Bonjour à tous et bienvenu sur Développement Facile.
Toujours un cours consacré au Frameowrk JavaScript Dojo Toolkit, dans le cours précédent, vous avez commencé à découvrir l’utilisation des éléments avec Dojo, c’est vraiment extrêmement, d’une simplicité enfantine, là c’est un complément ce cours, c’est la suite du cours précédent donc en allant un peu plus loin dans la gestion des évévements.
L’événement onchange
L’événement onchange, c’est lors du changement d’état d’un élément, on appelle la fonction dojo écouteurs, par exemple, un bouton, quand on clique dessus il y a un événement onchange qui est diffusé, et dans d’autres cas également.
Vous avez onmouseenter et onmouseleave ça fonctionne exactement, respectivement comme onmouseover et onmouseout, lorsque la souris entre au-dessus d’un élément alors qu’elle clique au-dessus d’un élément, onmouseleave.
L’objet événement
Vous avez un objet événement ou vous pouvez récupérer plusieurs propriétés, l’objet événement dojo accepte plusieurs paramètres,
target c’est l’élément qui a généré l’événement par exemple, une div qui génère l’événement onclick,
currentTarget c’est l’élément qui répond à l’événement,
layerX et layerY ce sont les coordonnées XY de la souris par rapport à currentTarget,
pageX et pageY ce sont les coordonnées XY du curseur de la souris, là par contre, par rapport à la fenêtre du navigateur, donc c’est différent de layerX et layerY,
charCode c’est le code du caractère de la touche enfoncée sur keyPress,
preventDefault ça empêche la manipulation par défaut de l’événement,
stopPropagation si vous avez fait de l’ActionScript, vous le connaissez, ça empêche la propagation de l’événement noeud parent.
Déconnecter un événement
Vous pouvez déconnecter un événement ou dans les autres langages ActionScript c’est removeEventListener, l’équivalent c’est dojo.disconnect, et ça met fin à l’événement qui était écouté, mis en place avec dojo.connect. Dojo.connect ça équivaux à addEventListener en ActionScript, dojo.disconnect c’est équivalant à removeEventListener en ActionScript.
Je ne sais pas pourquoi ils ont choisi disconnect et connect, parce que dans les autres langages c’est addEventListener et removeEventListener, il y a surement une raison.
Exemple d’application
Je vous montre un exemple de code source, comme d’habitude, alors on fait un dojo.connect, si image onchange passe sur l’événement onchange, on la rend visible l’image, si l’image elle est ici, cliquez pour afficher l’image, il y a l’événement onchange qui est diffusé, on affiche l’image, j’ai pas fait la gestion du masqué, j’aurais pu le faire, c’est vrai, j’avoue, événement onchange diffusé, on affiche l’image, dans ce code source qu’est-ce qu’il y a d’autre ?
Au-dessus de la liste, on fait un effet de style sur tous les enfants, impaires de la liste, et quand on quitte la liste, on remet un background couleur blanche, sur tous les enfants impaires, comme jQuery, ensuite si vous cliquez sur la balise div ça va afficher les coordonnées de la souris, un clic, coordonnées de la souris, donc c’est les coordonnées de la souris par rapport au navigateur, là ça doit être proche de zéro.
Et pour afficher une boite de dialogue sur le onclick, la boite de dialogue s’affiche une seule fois, vous pouvez cliquer plusieurs fois elle ne se réaffichera pas, pourquoi ?
Parce que on a mis un handle bouton, on écoute l’événement onclick sur node qui est représenté par btn call qui est ici, l’id btn call, on créé un événement sur ce bouton-là, une fois que l’événement est appelé, une première fois on affiche la boite de dialogue, par contre la deuxième on fait un disconnect sur handle bouton, on déconnecte l’événement. C’est pour ça que ça ne marchera qu’une seule fois.
Votre plan d’actions !
Vous avez déjà de quoi faire, vous avez déjà eu de nombreux cours, une bonne dizaine de cours sur Dojo Toolkit, téléchargez le code source disponible sous ce cours vidéo et à vous de le mettre en pratique dans vos applications HTML 5, si vous avez des questions, posez-les sous ce cours vidéo, je vous répondrai avec plaisir et je vous dis à très bientôt sur Développement Facile.
[/ppmtoggle][/ppmaccordion]
Téléchargez l’exemple Dojo
Et voici le code source commenté pour la gestion avancée des événements avec Dojo.
Téléchargement du code source Exemple de gestion avancée des événements avec le Framework Dojo
