Les événements HTML - Cours Javascript

Introduction

Info

Avant de commencer les cours sur les événements, voici quelques exemples concrets.

Exemples d'événements

onChange

Quand on change le contenu.
Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea, select
Exemple : Tabpez du texte dans le champ texte et cliquez en dehors

Exemple de code :
<form><input type="text" value="" onchange="alert('onchange')"/></form>

onError

Lorsqu'il se produit une erreur de script.
Est utilisé sur l'objet javascript image, window, frame
Est utilisé sur la balise HTML mg, body, frame, frameset

onFocus

Quand un objet gagne le focus.
Est utilisé sur l'objet javascript window, frame, form
Est utilisé sur la balise HTML body, frameset, frame, input

Exemple : cliquez dans le champ texte.

Exemple de code :
<form><input type="text" value="" onfocus="alert('onfocus')"/></form>

onBlur

Lorsque l'objet perd le focus.
Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame, frameset

Exemple : cliquez dans le champ texte et cliquez en dehors

Exemple de code :
<form><input type="text" value="" onblur="alert('onblur')"/></form>

onKeyDown

Quand j'appuie sur la touche.
Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea
Exemple : Tapez du texte dans le champ texte.

Exemple de code :
<form><input type="text" value="" onkeydown="alert('onkeydown')"/></form>

onKeyPress

Quand j'appuie sur une touche.
Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea

Exemple : Tapez du texte dans le champ texte.

Exemple de code :
<form><input type="text" value="" onkeypress="alert('onkeypress')"/></form>

onKeyUp

Quand je lâche la touche.
Est utilisé sur l'objet javascript link, image, document, form
Est utilisé sur la balise HTML a, img, body, textarea et autre

Exemple : Tapez du texte dans le champ texte.

Exemple de code :
<form><input type="text" value="" onkeyup="alert('onkeyup')"/></form>

onLoad

Lors du chargement.
Est utilisé sur l'objet javascript image, window, frame
Est utilisé sur la balise HTML [img, body, frameset, frame

onMouseDown

Quand le bouton de la souris est appuyé.
Est utilisé sur l'objet javascript link, document, form
Est utilisé sur la balise HTML a, body, form et autre

Exemple : Cliquez sur le carré.

Exemple de code :
<div style="width:100px;height:100px;border:1px solid red" onmousedown="alert('onmousedown')"></div>

onMouseMove

Quand le curseur bouge.
Est utilisé sur l'objet javascript link, document, form
Est utilisé sur la balise HTML a, body, form

onMouseOut

Quand je sors du lien.
Est utilisé sur l'objet javascript link, area
Est utilisé sur la balise HTML a, area et autre

Exemple : Passez la souris sur le bouton.

Exemple de code :
<form><input type="button" value="Bouton" onmouseout="alert('onmouseout')"/></form>


Exemple de code :
<div style="width:100px;height:100px;border:1px solid red" onmouseout="alert('onmouseout')"></div>

onMouseOver

Quand je passe sur le lien
Est utilisé sur l'objet javascript link, area
Est utilisé sur la balise HTML a, area et autre

Exemple : Passez la souris sur le bouton.

Exemple de code :
<form><input type="button" value="Bouton" onmouseover="alert('onmouseover')"></form>


Exemple de code :
<div style="width:100px;height:100px;border:1px solid red" onmouseover="alert('onmouseover')"></div>

onMouseUp

Quand le bouton de la souris est relâché.
Est utilisé sur l'objet javascript link, document, form
Est utilisé sur la balise HTML a, body, input, et autre

Exemple : Cliquez sur le bouton.

Exemple de code :
<form><input type="button" value="Bouton" onmouseup="alert('onmouseup')"></form>


Exemple de code :
<div style="width:100px;height:100px;border:1px solid red" onmouseup="alert('onmouseup')"></div>

onMove

Quand je déplace la fenêtre.
Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

onReset

Quand je réinitialise.
Est utilisé sur l'objet javascript forms
Est utilisé sur la balise HTML form

Exemple : Cliquez sur le sur le bouton.

Exemple de code :
<form onreset="alert('onreset')"><input type="reset" value="Bouton" /></form>

onResize

Quand je redimensionne.
Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

onSelect

Quand je sélectionne.
Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML input, textarea


Exemple de code :
<form onsubmit="alert('onsubmit')"><input type="submit" value="Bouton" /></form>

onSubmit

Quand j'envoie un formulaire.
Est utilisé sur l'objet javascript form
Est utilisé sur la balise HTML form

Exemple : Cliquez sur le sur le bouton.

Exemple de code :
<form onsubmit="alert('onsubmit')"><input type="submit" value="Bouton" /></form>

onUnload

Quand on ferme la fenêtre.
Est utilisé sur l'objet javascript window, frame
Est utilisé sur la balise HTML body, frameset, frame

onClick

Quand je clique.
Est utilisé sur l'objet javascript link,document, form
Est utilisé sur la balise HTML a, body, area et autre

Exemple : Cliquez sur le sur le bouton.

Exemple de code :
<form><input type="button" value="Bouton" onclick="alert('onclick')" /></form>


Exemple de code :
<div style="width:100px;height:100px;border:1px solid red" onclick="alert('onclick')"></div>

onDblClick

Quand on fait un double clique.
Est utilisé sur l'objet javascript link, document,area
Est utilisé sur la balise HTML a, body, area et autre


Exemple de code :
<div style="width:100px;height:100px;border:1px solid red" ondblclick="alert('ondlclick')"></div>

onAbort

L'utilisateur a stoppé le chargement de l'image.
Est utilisé sur l'objet javascript form, window, frame
Est utilisé sur la balise HTML input, textarea, select, body, frame, frameset
Chapitre les tailles des fenêtres
Chapitre assigner un événement