Cours ⇒ Javascript et AJAX facebook twitter youtube

Les événements | Les événements


Les événements sont des actions de l'utilisateur qui vont pouvoir donner lieu à une interactivité. L'événement par excellence est le clic de souris, car c'est le seul que le HTML gère. Grâce au JavaScript il est possible d'associer des fonctions, des méthodes à des  événements tels que le passage de la souris au-dessus d'une zone, le changement d'une valeur dans un champ, etc. 

 

Ce sont les gestionnaires d'événements qui permettent d'associer une action à un événement.

La syntaxe d'un gestionnaire d'événement est la suivante : 

onEvenement="Action_Javascript_ou_Fonction();"

 

Les gestionnaires d'événements sont associés à des objets, et leur code s'insère dans la balise   de ceux-ci.

 Chaque événement ne peut pas être associé à n'importe quel objet. Ainsi par exemple, l'événement OnChange ne peut pas s'appliquer à un lien hypertexte. 

Le tableau ci-dessous présente les événements par liste alphabétique :

 

Evénement

Objets affectés

Description

onAbort

 

Images

 

S'exécute en cas d'arrêt de chargement, par appui sur le boutons stop ou par un clic prématuré sur un lien

onBlur

 

Fenêtres et tous les

éléments de formulaire

 

 S'exécute quand on quitte la fenêtre ou un objet de formulaire

onChange

 

Champs texte, zones texte,

listes de sélection

 

S'exécute quand un élément de formulaire est modifé

onClick

 

Boutons, boutons radio, boutons submit et reset, liens

 

S'exécute quand on clique dans ou sur un élément

onDragDrop

 

Fenêtres

 

S'exécute quand on pose un élément à l'intérieur

de la fenêtre du navigateur à l'aide la souris

 

onError

 

Images, fenêtres

 

S'exécute quand le chargement de l'image ou de la fenêtre provoque une erreur

onFocus

 

Fenêtres et tous les  éléments de formulaire

 

S'exécute quand on sélectionne la fenêtre ou

l'objet formulaire

onKeyDown

 

Documents, images, liens,

zones texte

 

S'exécute quand une touche du clavier est pressée

onKeyPress

 

Documents, images, liens,

zones texte

 

S'exécute quand on appuie et maintient une touche du clavier

onKeyUp

 

Documents, images, liens,  zones texte

 

S'exécute quand on relâche une touche du clavier

onLoad

 

Documents

S'exécute quand le document se charge

onMouseDown

 

 

Documents, boutons, liens

 

S'exécute quand on clique avec le bouton de la souris

onMouseMove

 

rien par défaut

S'exécute quand on bouge la souris

onMouseOut

 

Cartes, liens

 

S'exécute quand le pointeur de la souris sort d'une zone de sélection graphique ou un lien

onMouseOver

 

liens

 

S'exécute quand le pointeur de la souris passe sur  un lien

 

onMouseUp

Documents, boutons, liens

S'exécute quand on relâche le bouton de la souris

onMove

 

Fenêtres

 

 

S'exécute quand l'utilisateur ou un script bouge une fenêtre

onReset

 

Formulaires

S'exécute quand on "resete" un formulaire

onResize

 

Fenêtres

 

S'exécute quand l'utilisateur ou un script change la taille d'une fenêtre

onSelect

 

Champs ou zones texte

 

S'exécute quand on sélectionne une zone ou un champ texte (clavier ou souris)

onSubmit

 

Formulaire

S'exécute au moment de l'envoi d'un formulaire

onUnLoad

 

Documents

S'exécute quand on quitte le document

 

Le tableau ci-dessous résume les objets et les événements associés :

 

Objet  

Evénements associables

Lien hypertext  

onClick, onMouseOver, onMouseOut

Page du navigateur

onLoad, onUnload

Bouton, Case à cocher, Bouton radio, Bouton Reset

onClick

Liste de sélection d'un formulaire

onBlur, onChange, onFocus

Bouton Submit

onSubmit

Champ de texte et zone de texte

onBlur, onChange, onFocus, onSelect

 

Propriétés des objets

 

 

 

Object

Propriétés

Methodes

window

(fenêtre)

  • clear (fermé)
  • closed (fermé)
  • defaultStatus (texte ligne
  • status)
  • document (document)
  • frames (cadres)
  • history (historique)
  • innerHeight (hauteur interne)
  • innerWidth (largeur interne) length (longueur)
  • location (adresse)
  • locationbar (barre d'adresse)
  • menubar (barre de menu)
  • name (nom)
  • opener (source ouverture)
  • outerHeight (hauteur
  • externe)
  • outerWidth (largeur externe) pageXOffset (décalage
  • horizontal)
  • pageYOffset (décalage
  • vertical)
  • parent (parent)
  • personalbar (barre adresses
  • personelles)
  • scrollbars (glissères) 
  • self (sois-même)
  • status (état)
  • statusbar (ligne d'état)
  • toolbar (barre d'outils) 
  • top (haut) 
  • window (fenêtre)
  • alert (message d'alerte)
  • back (arrière)
  • blur (déselection)
  • captureEvents (événement)
  • clearInterval (efface compteur)
  • clearTimeout (efface délai)
  • close (fermeture)
  • confirm (panneau de demande)
  • disableExternalCapture (pas de
  • capture externe)
  • enableExternalCapture (capture
  • externe (souris))
  • find (cherche)
  • focus (sélection)
  • forward (avant)
  • handleEvent (événement)
  • home (page par défaut)
  • moveBy (avance ou recule de)
  • moveTo (avance ou recule à)
  • open (ouvre)
  • print (imprime)
  • prompt (paneau de demande)
  • releaseEvents (événement)
  • resizeBy (change taille de)
  • resizeTo (change taille à)
  • routeEvent (événement) 
  • scroll (fait défiler)
  • scrollBy (fait défiler de)
  • scrollTo (fait défiler à)
  • setInterval (valeur intervalle du
  • compteur) 
  • setTimeout (valeur du délai)
  • stop (stop)

location

(adresse)

  • hash (référence dans page,
  • ex: #ref1) 
  • host (machine hôte)
  • hostname (nom de la
  • machine hôte)
  • href (document)
  • pathname (chemin)
  • port (port utilisé, ex: 80,
  • 8000...)
  • protocol (protocole: HTTP,
  • FTP, etc...)
  • search (recherche)
  • reload (relit)
  • replace (remplace) 

history

(historique)

  • current (courant)
  • length (longueur)
  • next (suivant)
  • previous (précédent)
  • back (arrière)
  • forward (avant)
  • go (vas à)

screen

(écran)

  • availHeight (Hauteurdisponible) 
  • availWidth (largeurdisponible) 
  • colorDepth (nombre de planscouleurs) 
  • height (hauteur)
  • pixelDepth (profondeur du point)
  • width (largeur)

 

document

(document)

alinkColor (couleur liens actif <BODY ALINK="">)

anchors (liens<A HREF="">)

applets (programmes Java externes

<APPLET>)

 bgColor (couleur de fond

<BODY

BGCOLOR="">

)

 cookie (cookies (reconnaissance))

 domain (domaine)

 embeds (programmes externes

<EMBED>)

 fgColor (couleur du texte

<BODY

TEXT="">

)

 formName (nom formulaire)

 forms (formulaires)

 images (images)

 lastModified (dernière

modification)

 layers (couches)

 linkColor (couleur des liens

<BODY

LINK="">

)

 links (documents liés

<LINK="">)

 plugins (programmes externes)

 referrer (adresse page précédente)

 title (titre)

 URL (adresse)

 vlinkColor (couleur liens visités

<BODY VLINK="">)

captureEvents (événements)

 close (fermeture)

 getSelection (texte sélectionn handleEvent (piège

événements)

 open (ouverture)

 releaseEvents (arrêt piège

événements)

 routeEvent (événements)

 write (écrit des caractères)

 writeln (écrit des lignes) 

link

(attaches)

  • hash (référence dans page, ex:#ref1) 
  • host (machine hôte)
  • hostname (nom de la machine hôte)
  • href (document attaché)
  • pathname (chemin) 
  • port (port utilisé, ex: 80, 8000...)
  • protocol (protocole: HTTP, FTP, etc...)
  • search (recherche)
  • target (destination)
  • text (texte) 
  • HandleEvent (événement) 

images

(images)

  • border (bord)
  • complete (chargement fini)
  • clear (efface)
  • height (hauteur)
  • hspace (espace horizontal)
  • lowsrc (?)
  • name (nom)
  • prototype (prototype)
  • src (nom du fichier)
  • vspace (espace vertical)
  • width (largeur) 
  • HandleEvent (événement)  

layers

(couches)

  • above (dessus)
  • background (image de fond)
  • bgColor (couleur de fond)
  • below (dessous)
  • clip.bottom (coordonée du bas pour
  • découpe)
  • clip.height (coordonée de la hauteur
  • pour découpe)
  • clip.left (coordonée gauche pour
  • découpe)
  • clip.right (coordonée droite pour
  • découpe)
  • clip.top (coordonée du haut pour
  • découpe) 
  • clip.width (coordonée de la largeur
  • pour découpe) 
  • document (nom du document)
  • name (nom de la couche) 
  • pageX (?)
  • pageY (?)
  • parentLayer (couche parent)
  • siblingAbove (?) 
  • siblingBelow (?)
  • src (nom de fichier)
  • top (haut) 
  • captureEvents événements
  • handleEvent (événement)
  • load (charge)
  • moveAbove (souris dessus)
  • moveBelow (souris dessous)
  • moveBy (déplace de)
  • moveTo (déplace à)
  • moveToAbsolute (déplace à
  • (valeur absolue)) 
  • releaseEvents (événement)
  • resizeBy (change taille de)
  • resizeTo (change taille à)
  • routeEvent (événement) 

form

(formulaire)

  • action (action)
  • elements (éléments)
  • encoding (codage)
  • length (longueur)
  • method (méthode)
  • name (nom)
  • target (cible)
  • handleEvent(événement) 
  • reset (reset)
  • submit
  • (soumission)

hidden

(champ caché)

  • form (formulaire)
  • name (nom)
  • type (type)
  • value (valeur)

 

text

(champ texte)

  • defaultValue (valeur par défaut)
  • form (formulaire)
  • name (nom)
  • type (type)
  • value (valeur)
  • blur (déselection)
  • focus (sélection)
  • handleEvent
  • (événement)
  • select (actif)

textarea

(zone texte)

  • defaultValue (valeur par défaut)
  • form (formulaire)
  • name (nom)
  • type (type)
  • value (valeur)
  • blur (déselection)
  • focus (sélection)
  • handleEvent
  • (événement)
  • select (actif)

password

(mot de passe)

select

(sélection)

  • defaultValue (valeur par défaut) 
  • form (formulaire)
  • name (nom)
  • type (type)
  • value (valeur)
  • blur (déselection)
  • focus (sélection)
  • handleEvent
  • (événement)
  • select (actif)

button

 

submit

(Bouton

submit)

, reset

radio

, checkbox

 

  • checked (coché)
  • defaultChecked (coché par défaut)
  • form (formulaire)
  • name (nom)
  • type (type)
  • value (valeur)
  • blur (déselection)
  • click (cliqué)
  • focus (sélection)
  • handleEvent
  • (événement)

navigator

(navigateur)

(browser)

(baladeur)

  • appCodeName (nom de code de l'application) 
  • appName (nom del'application) 
  • appVersion (version de l'application) 
  • language (langue)
  • mimeTypes (formats  connus)
  • platform (machine utilisée)
  • plugins (programmes  externes)
  • userAgent (nom du navigateur)
  • javaEnabled (Java actif)
  • plugins.refresh (relecture des programmes externes)
  • preference (préférences)
  • taintEnabled (fonction taint

 

 

 

 

active)

 

 

 

 

 

 

 





>
Changer le fond
Oregionale Skin
7astuces
Sélectionnez un Fond (11)
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces
Fond de contenu
7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces 7astuces