Aller au contenu

Comment implémenter les événements avec le Framework Dojo

Les événements font partie intégrante du langage JavaScript.

Le Framework Dojo prévoit justement la gestion simplifiée des événements.

Tout est dans la formation ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment implémenter les événements avec le Framework Dojo

Bonjour à tous et bienvenu sur Développement Facile.

Encore un nouveau cours consacré au Framework Dojo Toolkit, un Framework qui va vous rendre d’immenses services. Là vous allez découvrir comment gérer les événements avec le Framework Dojo.

Les événements Dojo

On rentre tout de suite dans le vif du sujet, avec dojo.connect c’est une reformulation de l’événement addEventListener du JavaScript, si vous connaissez addEventListener soit en JavaScript, soit en ActionScript, dojo.connect c’est exactement la même chose, vous allez spécifier un nœud, donc une balise div, paragraphe, ou autre, l’événement à écouter, et à chaque fois que l’événement survient sur cette balise div ou etc. vous allez faire exécuter une fonction ou une variable.
Vous avez des événements onmouseover lors du survol d’un élément avec la souris,
onmouseout lorsque la souris quitte cet élément,
onmouseenter à l’entrée d’un élément avec la souris, c’est comme mouseover,
onmouseleave à la sortie d’un élément avec la souris comme mouseout,
onkeypress à la pression d’une touche,
onkeydown lors de l’enfoncement de la touche,
onkeyup lors du relâchement de la touche.

Vous avez également le onclick lors du clic sur un élément,
onfocus dans un formulaire lorsque vous sélectionnez un champ de texte, par exemple, généralement pour le renseigner,
onblur c’est lors de la perte du focus, vous êtes sur le champs texte, vous renseignez et l’utilisateur clique sur un autre champ de texte, vous avez onblur sur le champ de texte précédemment séléctionné,
onchange c’est lors du chargement d’état d’un formulaire par exemple, lorsque vous appuyez sur un bouton, lorsque vous faites un resize, sur un bloc de texte,
onsubmit c’est lors de la soumission d’un formulaire, par exemple, en appuyant sur le bouton valider.

onmouseover et onmouseout

Avec tous ces événements, vous avez la possibilité d’associer une balise div à un ou plusieurs événements et à une ou plusieurs fonctions. Comme je vous l’ai dit, l’événement onmouseover est appelé lors du survol d’un événement, et il est souvent associé à l’événement onmouseout, lorsque le curseur quitte l’élément.

L’événement onfocus

onfocus c’est avec un formulaire, lorsque l’utilisateur sélectionne un élément avec la souris, et onblur c’est lorsque l’utilisateur désélectionne l’élément de la souris.

Exemple d’application

Je vous montre un exemple de code source, alors comment ça fonctionne ?
Pareil, dojo.required string, .connect on va écouter sur la div qui s’appelle over, sur celle-là, bonjour, vous voyez, onmouseover, l’événement onmouseover, on fait un inner HTML, onmouseover, et on change le style avec la couleur de fond, la police en bold, en gras, la couleur de la police change, font size normale.
Et allover, quand la souris quitte l’élément, là, over gras, on la passe en italique, on change la couleur de la police, la background color en white, l’illustration des événements, très simple, avec Dojo Toolkit. Qu’est-ce que vous avez d’autre ?
Le focus, voilà, prise du focus, perte du focus, onfocus, onblur, on ajoute une classe effect, on supprime la classe effect, tout simplement. Là vous pouvez sélectionner tout d’un seul coup, soit vous en sélectionnez une, ou tout désélectionner, ça c’est géré, bien évidemment, par des check all, ici, on parcourt tous les éléments et on les check. Vraiment très simple, et là, vous pouvez écrire votre texte.

Votre plan d’actions !

Comme d’habitude, retrouvez un exemple de code source en téléchargement sous ce cours vidéo, mettez en pratique la gestion des événements Dojo, c’est ce qui va passer votre niveau de création des sites, des applications HTML 5, au niveau supérieur, si vous avez des questions posez-les directement sous cette vidéo et moi 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é de l’exemple du cours.

Téléchargement du code source Exemple de gestion des événements avec Dojo

Cliquez ici pour télécharger le code source Exemple de gestion des événements avec Dojo

Téléchargement du code source Framework Dojo complet : dojo-release-1.9.3

Cliquez ici pour télécharger le code source Framework Dojo complet : dojo-release-1.9.3

Pour quelles fonctionnalités utilisez-vous les événements Dojo?

Utilisez la zone commentaires, pour partager les fonctionnalités et le code source utilisé lorsque vous implémentez les événements via Dojo.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Développer des Applications JavaScript Performantes — dès la semaine prochaine ?

TÉLÉCHARGEZ : Les codes sources du livre « JavaScript Facile » pour Créer VOS Applications — dès la semaine prochaine !

Cliquez ici pour tout recevoir >>