HTML Liste des attributs d'événement

Somaire

Attributs d’événement global

LES BALISES HTML

Comment coder un événement pour un élément HTML

 Vous souhaitez peut-être appliquer un des gestionnaires d'événements en ligne comme suit :
Syntaxe :
<element événement="script">contenue de l’élément</element>

Exemple Exécuter un JavaScript lorsque l'utilisateur clique sur un élément :

Sélectionner le code

  <!DOCTYPE html>
  <html lang="fr">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>html5 demo</title>
  </head>
  <body>
   
  Paragraphe : <input type="text" id="champ1" value="Bonjour le
  monde !"><br>
  Conteneur : <input type="text" value= "Cliquez moi"
  onclick="this.value=document.getElementById('champ1').value;">
  <br><br>
  <p>On cliquant sur l’élément conteneur le texte dans l’élément Paragraphe est y
  copié </p>
  </body>
  </html>
    
 

Mais cette méthode est déconseillée, car elle mélange la structure du document et son contenu HTML avec le code (JavaScript). La meilleur option consiste à utiliser soit un code  JavaScript dans le head de la page ou un fichier javascript, ce type  conserve la structure du document et les contenus séparé du comportement javascript.

Exemple un JavaScript dans le head :

Sélectionner le code

  <!DOCTYPE html>
  <html lang="fr">
  <head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>html5 demo</title>
   
  <script>
  function copierTexte()
  {
  document.getElementById( "champ2").value=document.getElementById( "champ1").value;
  }
  </script>
  </head>
  <body>
   
  Paragraphe: <input type="text" id="champ1" value="Bonjour le monde!"><br>
  Conteneur: <input type="text" id="champ2">
  <br><br>
  <button onclick="copierTexte()">Copier le texte
  </button>
   
  <p>Une fonction est déclenchée lorsque le bouton est cliqué. La fonction copie
  le texte de champ1 en champ2.</p>
   
  </body>
  </html>
    
 

Référence attributs des événements

Cette référence couvre les attributs de l'événement qui seraient utilisés pour capturer un événement et déclencher une action avec un langage de script côté client tels que JavaScript.
Pour en savoir plus sur la programmation javascript, veuillez consulter notre tutorial JavaScript.
Voici les attributs d'événement global pouvant être ajoutés aux éléments HTML pour définir les actions d'événement.
Nouveau : Nouveau attribut d'événement en HTML5.


Attributs d'événement window

Événements déclenchés pour l'objet window (s'applique à la balise <body>) :

Attribut

Valeur

Description

onafterprint Nouveau

script

Script à exécuter après que le document est imprimé

OnBeforePrint Nouveau

script

Script à exécuter avant que le document soit imprimé

OnLoad

script

Se déclenche lorsque le chargement de la page est terminé

OnResize Nouveau

script

Se déclenche lorsque la fenêtre du navigateur est redimensionnée

OnUnload

script

Se déclenche une fois qu'une page a été déchargé (ou la fenêtre du navigateur a été fermée)
(c'est-à-dire : lorsque l’utilisateur quitte le document)


Événements de formulaire

Événements déclenchés par des actions à l'intérieur d'un formulaire HTML (s'appliquent à presque tous les éléments HTML, mais ils sont plus utilisé dans les éléments de formulaire) :

Attribut

Valeur

Description

onblur

script

Se déclenche au moment où l'élément du formulaire perd le focus

OnChange

script

Se déclenche au moment où la valeur de l'élément est modifiée

OnContextMenu Nouveau

script

Script à exécuter lorsqu'un menu contextuel est déclenché

onfocus

script

Se déclenche au moment où l'élément obtienne le focus

Onformchange Nouveau

script

Script à exécuter lorsqu'un formulaire est modifié

Onforminput Nouveau

script

Script à exécuter lorsqu’un utilisateur saisi des données dans le formulaire

Oninput Nouveau

script

Script à exécuter lorsqu’un utilisateur saisi des données dans l'élément du formulaire

Oninvalid Nouveau

script

Script à exécuter lorsqu'un élément n’est pas valide

onreset

script

Se déclenche lorsqu'un utilisateur clic sur le bouton de réinitialisation dans un formulaire
n’est pas pris en charge en HTML5

onselect

script

Est déclenché après que le texte ou une partie du texte a été sélectionné dans un élément

onsubmit

script

Se déclenche lorsqu'un formulaire est soumis.


Événements de clavier

Attribut

Valeur

Description

OnKeyDown

script 

Se déclenche lorsqu'un utilisateur presse une touche

OnKeyPress

script 

Se déclenche lorsqu'un utilisateur appuie sur une touche puis la relâche 

OnKeyUp

script 

Se déclenche lorsque l'utilisateur relâche une touche.


Événements de souris

Événements déclenchés par une souris ou une actions similaire de l'utilisateur :

Attribut

Valeur

Description

OnClick

script 

Se déclenche si par un click de la souris sur l'élément

ondblclick

script 

Se déclenche si par un double click de la souris sur l'élément

OnDrag Nouveau

script

Script à exécuter lorsque vous faites glisser un élément

Ondragend Nouveau

script

Script à exécuter à la fin d'une opération glisser

OnDragEnter Nouveau

script

Script à exécuter lorsqu'un élément a été déplacé vers une cible de déplacement valide

OnDragLeave Nouveau

script

Script à exécuter lorsque l'élément quitte une cible de déplacement valide

OnDragOver Nouveau

script

Script à exécuter lorsqu'un élément est déplacé sur une cible de déplacement valide

Ondragstart Nouveau

script

Script à exécuter au début d'une opération glisser

OnDropNouveau

script

Script à exécuter lorsque l'élément déplacé est relâche.

OnMouseDown

script 

Se déclenche lorsqu'un bouton de la souris est appuyé sur un élément

OnMouseMove

script 

Se déclenche lorsque le pointeur de la souris bouge sur un élément

onmouseout

script

Se déclenche lorsque le pointeur de la souris quitte un élément

onmouseover

script

Se déclenche lorsque le pointeur de la souris se déplace sur un élément

OnMouseUp

script 

Se déclenche lorsqu'un bouton de la souris est relâché sur un élément

OnMouseWheel Nouveau

script

Script à exécuter lors de la rotation de la roulette de la souris

Onscroll Nouveau

script

Script à exécuter lorsque la barre de défilement de l'élément en cours défilement


Événements multimédias

Événements déclenchés par des médias tels que vidéos, images et fichiers audio (s'applique à tous les éléments HTML, mais plus fréquemment utilisés dans les éléments multimédias, comme <audio>, <embed>, <img>, <object> et <video>) :

Attribut

Valeur

Description

OnAbort

script

Script à exécuter sur l'abandon d’un événement

oncanplayNouveau

script

Script à exécuter lorsqu'un fichier est prêt à commencer à jouer (quand il a tamponné assez pour commencer)

oncanplaythroughNouveau

script

Script à exécuter lorsqu'un fichier peut être lu jusqu'à la fin, sans interruption pour la mise en mémoire tampon

ondurationchangeNouveau

script

Script à exécuter lorsque la longueur des médias change

onemptiedNouveau

script

Script à exécuter lorsque pour une raison inconnu le fichier n'est soudainement plus disponible (comme déconnection inopinée)

onendedNouveau

script

Script à exécuter lorsque la lecture du média est allée jusqu'au bout (un événement utile pour les messages comme « Merci pour l'écoute »)

OnErrorNouveau

script

Script à exécuter lorsqu'une erreur se produit quand le fichier est en cours de chargement

onloadeddataNouveau

script

Script à exécuter lors du chargement de données du média

onloadedmetadataNouveau

script

Script à exécuter lorsque les métadonnées (comme les dimensions et durée) sont chargées

onloadstartNouveau

script

Script à exécuter lorsque le navigateur commence à charger un élément média

OnPauseNouveau

script

Script à exécuter lorsque le média est mis en pause par l'utilisateur ou par un programme

OnPlayNouveau

script

Script à exécuter lorsque le média est prêt à commencer à jouer

onplayingNouveau

script

Script à exécuter lorsque le média commence à jouer

OnProgressNouveau

script

Script à exécuter lorsque le navigateur charge les données d’un élément média

onratechangeNouveau

script

Script à exécuter chaque fois que les données de la lecture d’un élément média ont changé (comme lorsqu'un utilisateur bascule vers le mode avance rapide ou le mode ralenti)

onreadystatechangeNouveau

script

Script à exécuter à chaque fois que « prêt pour la lecture » change

onseekedNouveau

script

Script à exécuter lorsque l'attribut recherche a la valeur false qui indique que la recherche a pris fin

onseekingNouveau

script

Script à exécuter lorsque l'attribut cherche est défini à true indiquant que cherche est active

onstalledNouveau

script

Script à exécuter lorsque le navigateur ne parvient pas à extraire les données du média pour une raison quelconque

onsuspendNouveau

script

Script à exécuter lorsque pour une raison quelconque l'extraction des données du média est arrêté avant qu'il soit complètement chargé.

ontimeupdateNouveau

script

Script à exécuter lorsque la position de lecture a été modifiées (comme lorsque l'utilisateur fait avancer la lecture à un point différent dans le média)

onvolumechangeNouveau

script

Script à exécuter chaque fois que le volume est modifié  (y compris le réglage du volume sur « muet »)

OnWaitingNouveau

script

Script à exécuter lorsque le média est suspendu mais devrait reprendre

Par carabde 10 mars 2014

 Retour à la liste de balise HTML 

Accueil du site