MEILLEUR SITE POUR LES DÉVELOPPEURS WEB
HTML CSS JAVASCRIPT SQL PHP PYTHON JAVA KOTLIN GO C C++ C# AI W3.CSS TypeScript Comment faire Plus 🔍 ◑ RÉFÉRENCES EXERCICES

JS Tutoriel

JS MAISON JS Introduction JS Où aller JS Sortir JS Déclarations JS Syntaxe JS Commentaires JS Variables JS Let JS Const JS Opérateurs JS Arithmétique JS Devoir JS Types de données JS Fonctions JS Objets JS Événements JS Chaînes JS Méthodes de chaîne JS Recherché de chaîne JS Modèles de chaînes JS Nombres JS Méthodes numériques JS Tableaux JS Méthodes de tableau JS Tri de tableau JS Itération de tableau JS Const. de tableau JS Dates JS Formats de dates JS Méthodes d'obtention de date JS Méthodes de définition de dates JS Math JS Mathématiques JS Booléens JS Comparaisons JS If Else JS Switch JS Boucle For JS Boucle For In JS Boucle For Of JS Boucle While JS Break JS Itérables JS Ensembles JS Cartes JS Typeof JS Conversion de types JS Au niveau du bit JS RegExp JS Errors JS Portée JS Levage JS Mode strict JS this Mot clé JS Fonction flèche JS Cours JS Modules JS JSON JS Débogage JS Guide de style JS Meilleures pratiques JS Erreurs JS Performance JS Mots réservés

JS Versions

JS Versions JS 2009 (ES5) JS 2015 (ES6) JS 2016 JS 2017 JS 2018 JS 2019 JS 2020 JS 2021/2022 JS IE / Edge JS Histoire

JS Objets

Définitions d'objets Propriétés de l'objet Méthodes d'objet Affichage des objets Accesseurs d'objet Constructeurs d'objets Prototypes d'objets Itérables d'objet Ensembles d'objets Cartes d'objets Référence d'objet

JS Fonctions

Définitions des fonctions Paramètres de fonction Invocation de fonction Appel de fonction Fonction Appliquer Fonction Liaison Fermetures de fonctions

JS Cours

Introduction au cours Héritage de classe Classe statique

JS Asynchrone

JS Rappels JS asynchrone JS Promesses JS Async/Await

JS HTML DOM

DOM Intro DOM Méthodes DOM Document DOM Éléments DOM HTML DOM Formulaires DOM CSS DOM Animations DOM Événements DOM Écouteur d'événements DOM Navigation DOM Nœuds DOM Collections DOM Listes de nœuds

JS Browser BOM

JS Window JS Screen JS Location JS History JS Navigator JS Popup Alert JS Timing JS Cookies

JS Web APIs

Web API Intro Formulaires Web API Historique Web API Stockage Web API Travailleur Web API Récupération Web API Géolocalisation Web API

JS AJAX

AJAX Intro AJAX XMLHttp AJAX Demande AJAX Réponse AJAX XML Déposer AJAX PHP AJAX ASP AJAX Base de données AJAX Applications AJAX Exemples

JS JSON

JSON Intro JSON Syntaxe JSON vs XML JSON Types de données JSON Analyser JSON Stringifier JSON Objets JSON Tableaux JSON Serveur JSON PHP JSON HTML JSON JSONP

JS vs jQuery

jQuery Sélecteurs jQuery HTML jQuery CSS jQuery DOM

JS Graphique

JS Graphique JS Canvas JS Plotly JS Chart.js JS Google Chart JS D3.js

JS Exemples

JS Exemples JS HTML DOM JS HTML Input JS HTML Objets JS HTML Événements JS Browser JS Éditeur JS Exercices JS Questionnaire JS Camp d'entraînement JS Certificat

JS Références

JavaScript Objets HTML DOM Objets

JavaScript. W3Schools en français. Cours pour débutants

En Ua Es De

JavaScript Événements

❮ Prev Next ❯

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

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

Événements HTML

Un événement HTML peut être quelque chose que fait le navigateur ou quelque chose que fait un utilisateur.

Voici quelques exemples d'événements HTML :

  • Une page Web HTML a fini de se charger
  • Un champ de saisie HTML a été modifié
  • Un bouton HTML a été cliqué

Souvent, lorsque des événements se produisent, vous souhaitez peut-être faire quelque chose.

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

HTML permet d'ajouter des attributs de gestionnaire d'événements, avec du code JavaScript, aux éléments HTML.

Avec des guillemets simples :

<elementevent='some JavaScript'>

Avec des guillemets doubles :

<elementevent="some JavaScript">

Dans l'exemple suivant, un attribut onclick (avec code) est ajouté à un élément <button> :

Exemple

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>
Try it Yourself »

Dans l'exemple ci-dessus, le code JavaScript modifie le contenu de l'élément avec id="demo".

Dans l'exemple suivant, le code modifie le contenu de son propre élément (en utilisant this.innerHTML):

Exemple

<button onclick="this.innerHTML = Date()">The time is?</button>
Try it Yourself »

Le code JavaScript comporte souvent plusieurs lignes. Il est plus courant de voir des attributs d'événement appeler des fonctions :

Exemple

<button onclick="displayDate()">The time is?</button>
Try it Yourself »

Événements HTML courants

Voici une liste de certains événements HTML courants :

Événement Description
onchange Un élément HTML a été modifié
onclick L'utilisateur clique sur un élément HTML
onmouseover L'utilisateur déplace la souris sur un élément HTML
onmouseout L'utilisateur éloigne la souris d'un élément HTML
onkeydown L'utilisateur appuie sur une touche du clavier
onload Le navigateur a fini de charger la page

La liste est beaucoup plus longue : Référence JavaScript W3Schools Événements HTML DOM.

Gestionnaires d'événements JavaScript

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

  • Choses à faire à chaque chargement d'une page
  • Choses à faire lorsque la page est fermée
  • Action à effectuer lorsqu'un utilisateur clique sur un bouton
  • Contenu à vérifier lorsqu'un utilisateur saisit des données
  • Et plus encore...

De nombreuses méthodes différentes peuvent être utilisées pour permettre à JavaScript de fonctionner avec des événements :

  • Les attributs d'événements HTML peuvent exécuter directement du code JavaScript
  • Les attributs d'événements 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 la gestion d'événements
  • Et plus encore...

Vous en apprendrez beaucoup plus sur les événements et les gestionnaires d’événements dans les chapitres HTML DOM.

Testez-vous avec des exercices

Exercice:

L'élément <button> devrait faire quelque chose lorsque quelqu'un clique dessus. Essayez de le réparer !

<button ="alert('Hello')">Click me.</button>

❮ Prev Next ❯