Apprendre à coder sur pierre-giraud.com

DES COURS COMPLETS ET GRATUITS POUR TOUS

SOMMAIRE

Introduction

  1. Présentation du cours
  2. Introduction au JavaScript
  3. Environnement de travail

Les bases en JavaScript

  1. Où écrire le JavaScript
  2. Syntaxe et commentaires
  3. Découverte des variables
  4. Les types de valeurs
  5. Opérations sur les variables
  6. La concaténation
  7. Présentation des conditions
  8. Les conditions if, if...else, if...else if...else
  9. Opérateurs logiques
  10. Evaluation / Simplification des conditions
  11. Conditions ternaires
  12. Switch
  13. Les boucles
  14. Découverte des fonctions
  15. Test n°1

Les objets en JavaScript

  1. Définition et découverte
  2. Valeurs primitives et objets
  3. Créer des objets
  4. Les méthodes de l’objet String
  5. Les méthodes de l’objet Number
  6. Découverte de l’objet Array
  7. Les méthodes de l’objet Array
  8. Découverte de l’objet Date
  9. Les méthodes de l’objet Date
  10. L’objet Math et ses méthodes
  11. Test n°2

Notions avancées sur les fonctions

  1. La portée en JavaScript
  2. Les fonctions anonymes
  3. Les fonctions auto-invoquées
  4. Les closures JavaScript
  5. Test n°3

Le DOM HTML

  1. Découverte du DOM HTML
  2. Accéder à un élément HTML
  3. Modifier du contenu HTML
  4. Ajouter et insérer des éléments HTML
  5. Modifier ou supprimer des éléments HTML
  6. Naviguer dans le DOM
  7. Les évènements en JavaScript
  8. AddEventListener()
  9. Propagation des évènements
  10. L'objet Event
  11. Test n°4

Le BOM - Browser Object Model

  1. Le BOM et l'objet Window
  2. L'objet Screen
  3. L'objet Navigator
  4. L'objet Location
  5. L'objet History
  6. Test n°5

Les expressions régulières

  1. Découverte des regex en JavaScript
  2. Recherches et remplacements
  3. Les quantifieurs et les options
  4. Les classes de caractères et les méta-caractères
  5. Test n°6

JavaScript et formulaires

  1. Rappels sur les formulaires en HTML
  2. Validation HTML des formulaires
  3. Validation JavaScript des formulaires
  4. Test n°7

L'élément HTML canvas

  1. Découverte de l'élément canvas
  2. Dessiner des rectangles
  3. Dessiner des lignes
  4. Dessiner des arcs de cercle
  5. Créer des dégradés
  6. Insérer du texte et des images
  7. Incliner un dessin
  8. Test n°8

Notions avancées

  1. Gestion du délai d'exécution
  2. La gestion des erreurs
  3. Le mode strict
  4. Test n°9

Conclusion

  1. Conclusion - Aller plus loin

L’OBJET EVENT – EMPECHER LA PROPAGATION D’UN EVENEMENT

Propriétés et méthode de l’objet Event

L’objet Event possède des propriétés et des méthodes nous informant sur le contexte de l’évènement déclenché ou qui vont impacter l’environnement.

Notez que cet objet n’est accessible que durant le déclenchement d’un évènement. Il faut donc y accéder au sein de la fonction servant à exécuter une action lors du déclenchement de l’évènement.

Event possède une dizaine de propriétés. Nous allons voir les propriétés target, currentTarget et type.

Les propriétés target et currentTarget de l’objet Event

La propriété target va retourner le type de l’élément qui a déclenché l’évènement.

La propriété currentTarget va elle retourner le type de l’élément portant le gestionnaire de l’évènement déclenché.

Ces deux propriétés vont être très utiles pour connaître précisément quel élément possède le gestionnaire d’évènement et dans quelle phase (capture ou bouillonnement) celui-ci s’est déclenché.

Regardez plutôt l’exemple ci-dessous :

Utilisation des propriétés target et currentTarget de l’objet event

Grâce à target et currentTarget, on peut savoir quel élément porte l’évènement et lequel le déclenche

Essayer ce code !

Ici, on voit très nettement que c’est le div qui porte le gestionnaire d’évènement. Seulement, on déclenche cet évènement en cliquant sur le paragraphe contenu dans le div.

Connaître l’élément déclencheur de l’évènement et celui porteur du gestionnaire d’évènement va s’avérer surtout utile dans le cas de scripts assez complexes, dans lesquels on ne peut soit pas accéder directement à ces éléments, soit on ne les connaît pas à priori.

Notez que l’on doit passer une référence à l'objet Event en argument de notre fonction afin de pouvoir le réutiliser avec ses propriétés à l’intérieur de notre fonction. Ici, j'ai tout simplement appelé cet argument event.

La propriété type de l’objet Event

La propriété type de l’objet Event va tout simplement retourner le type d’évènement qui a été déclenché.

Celle-ci s’utilise de façon analogue aux précédentes :

Utilisation de la propriété type de l’objet event

La propriété type de l’objet event nous permet de connaître le type d’évènement déclenché

Essayer ce code !

Empêcher la propagation d’un évènement

Vous devez savoir qu’on peut tout bonnement empêcher la propagation d’un événement. Pour cela, on utilise généralement la méthode stopPropagation(), qui est une méthode de l’objet Event.

Cette méthode va faire qu’un évènement va arrêter de se propager après avoir rencontré l’élément la portant.

Regardons immédiatement un exemple :

Utilisation de la méthode stopPropagation() de l’objet event

On utilise stopPropagation pour empêcher la propagation d’un évènement

Essayer ce code !

Ci-dessus, nous avons utilisé la phase de capture. On sait donc que l’évènement lié au div va se déclencher avant celui lié au paragraphe.

Dans la fonction liée à l’évènement de notre div, nous avons utilisé la méthode stopPropagation(), qui est une méthode de l’objet Event (et qui a donc besoin d'une référence à cet objet pour fonctionner).

Ainsi, dès que l’évènement va parvenir au div, la fonction qui lui est relative va être exécutée et stopPrapagation() va empêcher que l’évènement se propage plus loin. L’évènement lié à notre paragraphe ne sera donc jamais déclenché.

Empêcher l’exécution d’un gestionnaire d’évènements

Pour certains évènements, on va également pouvoir empêcher tout simplement l’évènement en soi.

Pour cela, on va utiliser une autre méthode de l’objet Event : la méthode preventDefault().

Attention cependant : cette méthode ne va fonctionner qu’avec les évènements dont on peut stopper l’action.

Notez également que preventDefault() ne va en revanche pas stopper la propagation d’un évènement.

Utilisation de la méthode preventDefault() de l’objet JavaScript event

Essayer ce code !

Tout ce que je vous montre ici peut vous sembler assez abstrait et sans intérêt, cependant vous devez absolument vous forcer à penser en termes « pratique ».

Par exemple, les deux méthodes étudiées ci-dessus vont pouvoir vous servir dans le cas de la validation d’un formulaire : si un utilisateur remplit mal un formulaire, vous pourrez empêcher l’envoi du formulaire et afficher un message.

Chapitre précédent

Chapitre suivant