Derniers tutoriels de développement web
 

JavaScript événement


Événements HTML sont des «choses» qui se produisent en HTML éléments.

Lorsque JavaScript est utilisé dans les pages HTML, JavaScript peut «réagir» sur ces événements.


HTML Evénements

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

Voici quelques exemples d'événements HTML:

  • Une page HTML Web a terminé le chargement
  • Un champ de saisie HTML a été modifié
  • Un bouton HTML a été cliquée

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

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

HTML permet gestionnaire d'attributs d' événement, avec le code JavaScript, à ajouter aux éléments HTML.

Avec des guillemets simples:

< some-HTML-element some-event = ' some JavaScript ' >

Avec des guillemets doubles:

< some-HTML-element some-event = " some JavaScript " >

Dans l'exemple suivant, un onclick attribut (avec le code), est ajouté à un élément de bouton:

Exemple

<button onclick='getElementById("demo").innerHTML=Date()'>The time is?</button>
Essayez - le vous - même »

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

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

Exemple

<button onclick="this.innerHTML=Date()">The time is?</button>
Essayez - le vous - même »

code JavaScript est souvent plusieurs lignes. Il est plus fréquent de voir des attributs d'événement appelant des fonctions:

Exemple

<button onclick="displayDate()">The time is?</button>
Essayez - le vous - même »

HTML Common Events

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

un événement La description
onchange Un élément HTML a été changé
onclick L'utilisateur clique sur un élément HTML
onmouseover L'utilisateur déplace la souris sur un élément HTML
onmouseout L'utilisateur déplace la souris en dehors 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: w3ii Référence JavaScript HTML DOM Events .


Que peut JavaScript faire?

Les gestionnaires d'événements peuvent être utilisés pour traiter et vérifier l'entrée d'utilisateur, les actions des utilisateurs, et les actions du navigateur:

  • Les choses qui devraient être faites à chaque fois qu'une page se charge
  • Les choses qui devraient être faites lorsque la page est fermée
  • Action qui doit être effectuée lorsque l'utilisateur clique sur un bouton
  • Contenu qui doit être vérifié lorsque les données des entrées de l'utilisateur
  • Et plus ...

De nombreuses méthodes différentes peuvent être utilisées pour laisser travailler JavaScript avec des événements:

  • les attributs d'événements HTML peuvent exécuter du code JavaScript directement
  • les attributs d'événements HTML peuvent appeler des fonctions JavaScript
  • Vous pouvez attribuer vos propres fonctions de gestionnaire d'événements en HTML éléments
  • Vous pouvez empêcher que des événements soient envoyés ou être manipulés
  • Et plus ...

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


Testez-vous avec des exercices!

Exercice 1 » Exercice 2» Exercice 3 »