Événements JavaScript

Les événements HTML sont des "événements" qui se produisent sur des éléments HTML.

Lorsque JavaScript est utilisé dans une page HTML, JavaScript peut "réagir" à ces événements.

Événements HTML

Les événements HTML peuvent être des actions effectuées par le navigateur ou par l'utilisateur.

Voici quelques exemples d'événements HTML :

  • Le site web HTML est chargé
  • Le champ d'entrée HTML est modifié
  • Le bouton HTML est cliqué

Généralement, lorsque des événements se produisent, les utilisateurs souhaitent faire quelque chose.

JavaScript vous permet d'exécuter du code lorsque des événements sont détectés.

Par le biais du code JavaScript，HTML vous permet d'ajouter des gestionnaires d'événements aux éléments HTML.

Utilisez des guillemets simples :

<element event='Certaines parties de JavaScript>

Utilisez des guillemets doubles :

<element event="Certaines parties de JavaScript">

Dans l'exemple suivant,onclick Les attributs (et le code) sont ajoutés à <button> Élément :

Exemple

<button onclick='document.getElementById("demo").innerHTML=Date()'>Quelle est l'heure maintenant ?</button>

Essayez-le vous-même

Dans l'exemple précédent, le code JavaScript a modifié le contenu de l'élément id="demo" :

Dans l'exemple suivant, le code (utilise this.innerHTML) a modifié le contenu de son élément lui-même :

Exemple

<button onclick="this.innerHTML=Date()">Quelle est l'heure maintenant ?</button>

Essayez-le vous-même

Le code JavaScript comporte souvent de nombreuses lignes. Il est plus courant d'appeler une fonction via les attributs d'événement :

Exemple

<button onclick="displayDate()">Quelle est l'heure maintenant ?</button>

Essayez-le vous-même

Événements HTML courants

Voici quelques événements HTML courants :

événement description
onchange L'élément HTML a été modifié
onclick Le utilisateur clique sur l'élément HTML
onmouseover Le utilisateur déplace la souris sur l'élément HTML
onmouseout Le utilisateur déplace la souris hors de l'élément HTML
onkeydown Le utilisateur appuie sur une touche du clavier
onload Le navigateur a terminé le chargement de la page

Liste plus complète :Manuel de référence JavaScript et événements HTML DOM de CodeW3C.com.

Que peut faire JavaScript ?

Les gestionnaires d'événements peuvent être utilisés pour traiter, valider les entrées de l'utilisateur, les actions de l'utilisateur et les actions du navigateur :

  • Action à effectuer lors du chargement de la page.
  • Action à effectuer lorsque la page est fermée.
  • Action à exécuter lorsque l'utilisateur clique sur un bouton.
  • Contenu à valider lorsque l'utilisateur saisit des données.
  • etc.

Il y a de nombreuses méthodes pour faire traiter les événements par JavaScript :

  • Les attributs d'événement HTML peuvent exécuter du code JavaScript.
  • Les attributs d'événement HTML peuvent appeler des fonctions JavaScript.
  • Vous pouvez attribuer vos propres fonctions de gestionnaire d'événements aux éléments HTML.
  • Vous pouvez empêcher l'envoi ou le traitement des événements.
  • etc.

Vous apprendrez plus sur les événements et les gestionnaires d'événements dans le chapitre HTML DOM.