Cours Javascript->Les événements HTML

Introduction

Info

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

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>
Descendre
Remonte

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
Descendre
Remonte

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>
Descendre
Remonte

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>
Descendre
Remonte

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>
Descendre
Remonte

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>
Descendre
Remonte

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>
Descendre
Remonte

onLoad

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

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>
Descendre
Remonte

onMouseMove

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

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>
Descendre
Remonte

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>
Descendre
Remonte

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>
Descendre
Remonte

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
Descendre
Remonte

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>
Descendre
Remonte

onResize

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

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>
Descendre
Remonte

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>
Descendre
Remonte

onUnload

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

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>
Descendre
Remonte

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>
Descendre
Remonte

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
Descendre
Remonte
Chapitre les tailles des fenêtres
Chapitre assigner un événement