Votre guide dans les plaines du far-web

Formation développeur web


« Donne un poisson à un homme, tu le nourris pour un jour. Apprends-lui à pêcher, tu le nourris pour toujours. » Lao Tseu

Pré-requis et introduction

Mis à jour le

Bienvenue dans le cours concernant la programmation événementielle en JavaScript.

Mais que se passe-t-il ? Il doit y avoir un événement ce soir !

(image visible sur la plateforme de formation)


Avant de débuter, vous devez déjà maitriser quelques notions :

  • les bases de JS, et surtout…
~~ Fin de l'extrait ~~

Présentation

Mis à jour le

En JavaScript, la programmation événementielle est un concept très important. En effet, c'est la principale interface entre les actions effectuées par l'utilisateur humain et votre application. Les événements sont un peu les "sens" de votre programme. Par exemple, un humain peut voir, sentir, gouter, entendre et toucher. Pour un programme,…

~~ Fin de l'extrait ~~

Événements et attributs de balises HTML

Mis à jour le

Cette méthode permet d'écouter un type d'événement sur une balise HTML en utilisant un attribut dédié. On écrira alors le code JS directement dans la valeur de l'attribut. 

Pour l'exemple, voici un simple événement clic sur un bouton, tout ce qu'il y a de…

~~ Fin de l'extrait ~~

Événements et méthodes du DOM

Mis à jour le

Une approche un peu plus "moderne" consiste à utiliser les méthodes natives des éléments du DOM pour exécuter une fonction contenant le bloc d'instruction à exécuter. Le JS sera complètement extrait du HTML, et on va enfin pouvoir écrire du code sans mélanger HTML…

~~ Fin de l'extrait ~~

Méthode spécialisée : le gestionnaire d’événements

Mis à jour le

La dernière méthode que nous allons voir pour gérer les événements et celle que vous devez retenir et utiliser en priorité. Elle consiste à passer par une méthode spécialisée dans la gestion des événements : c'est ce que l'on appelle un gestionnaire d'événements. Cette méthode s'applique…

~~ Fin de l'extrait ~~

Objet Event

Mis à jour le

L'objet Event est automatiquement passé à votre callback en premier paramètre. C'est un objet émis par le navigateur, qui contient tous les détails techniques concernant l'évènement qui vient de se produire.


Voici notre objet event, il vous donne accès à toutes les informations concernant un événement.

(image visible sur la plateforme de formation)

~~ Fin de l'extrait ~~

Référence à la cible de l'événement

Mis à jour le

Utiliser l'objet this


https://www.sitepoint.com/javascript-this-event-handlers/


https://metafizzy.co/blog/this-in-event-listeners/


https://stackoverflow.com/questions/17665489/using-this-inside-an-event-handler

~~ Fin de l'extrait ~~

Événements souris

Mis à jour le

Un des types d'événements les plus courant sera le clic souris, comme nous l'avons déjà vue. Mais la souris peut émettre d'autres types d'événements, en voici un récapitulatif :

  • click : cliquer (appuyer puis relâcher) sur l'élément
  • dblclick : double-cliquer…
~~ Fin de l'extrait ~~

Événements clavier

Mis à jour le Bien que moins répandue que la souris en développement web, l'utilisation du clavier est désormais incontournable. Certains comportements sont acquis par les utilisateurs, tels que :
  • appuyer sur la touche Echap pour fermer une fenêtre modale
  • réagir en temps réel à une saisie utilisateur
  • etc..


Vous aurez…

~~ Fin de l'extrait ~~

Formulaire

Mis à jour le

Comme vous le savez, les formulaires sont un élément clé de vos pages web. Ils représentent quasiment les seuls "input" dont vos utilisateurs disposent pour interagir avec votre serveur. De ce fait, ils ont un fonctionnement assez poussé, et disposent d'événements particuliers. Nous allons en voir quelques-uns.


Focus et…
~~ Fin de l'extrait ~~

Chargement du DOM et des ressources externes

Mis à jour le

C'est un des événements les plus importants, car lorsque l'on souhaite travailler avec le DOM en JavaScript, il faut attendre que celui-ci soit entièrement chargé dans le navigateur. Cela peut prendre un certains temps, en fonction du contenu de la page web, et de…

~~ Fin de l'extrait ~~

Scroll

Mis à jour le

L'événement scroll est assez utilisé pour en parler un peu. C'est un événement qui est émit par le navigateur lorsque l'utilisateur est en train de scroller (descendre ou monter) dans la fenêtre du navigateur. 

Attention, ce n'est pas un événement émis par la molette de la…
~~ Fin de l'extrait ~~

Propagation des événements : capture / bubbling

Mis à jour le

(image visible sur la plateforme de formation)

Bien qu'assez peu utilisé au quotidien, vous devez bien comprendre la notion de propagation des événements, car cela peut vous jouer des tours dans certains cas - inextricables - si vous n'avez pas compris ce concept. Je vous rassure, cela…

~~ Fin de l'extrait ~~

Événements personnalisés

Mis à jour le

https://developer.mozilla.org/fr/docs/Web/API/Event/Event


https://developer.mozilla.org/fr/docs/Web/Guide/DOM/Events/Creating_and_triggering_events


https://www.video-game-codeur.fr/javascript-evenements-personnalises-custom-event/#:~:text=Javascript%20met%20%C3%A0%20disposition%20du,par%20le%20biais%20des%20CustomEvent.

~~ Fin de l'extrait ~~

Drag and drop

Mis à jour le

https://developer.mozilla.org/fr/docs/Web/API/API_HTML_Drag_and_Drop