| onabort | Se déclenche lorqu'une image n'arrive pas à être complètement chargée ou si son chargement est interrompu par l'utilisateur Evènement s'appliquant uniquement à la balise <img> |
| onblur | Se déclenche lorque l'élément perd le focus |
| onchange | Se produit lorqu'une modification a lieu sur un champ de saisie |
| onclick | Se déclenche lorsqu'un clic est fait sur l'élément |
| ondblclick | Se déclenche lorsqu'un double clic est fait sur l'élément |
| ondragdrop | Se déclenche lorque l'utilisateur essaie de glisser déplacer un élément dans la fenêtre. Cet évènement s'applique à l'objet "window" : window.ondragdrop |
| onerror | Se déclenche lorsqu'une erreur est rencontrée au chargement de la page. Cet évènement s'applique à l'objet "window" : window.onerror |
| onfocus | Se déclenche lorsque l'élément à le focus |
| onkeydown onkeypress onkeyup |
Ces trois évènements constituent ensemble la saisie d'une touche du clavier : "onkeydown" correspond à l'action d'appuyer sur une touche "onkeypress" correspond à l'action de maintenir enfoncer la touche "onkeyup" correspond à l'action de relacher la touche |
| onload | Cet évènement se déclenche lorsque le document a terminé son chargement complet |
| onmouseover onmouseout |
Ces évènement se déclenchent losrque le curseur de la souris survole l'élément (onmouseover) ou bien quitte l'élément (onmouseout) |
| onmousemove | Se déclenche losrque le curseur de la souris se déplace sur le document html |
| onmousedown onmouseup |
Ces évènement se déclenchent losrqu'un bouton de la souris est appuyé (onmousedown) ou bien relaché (onmouseup) |
| onreset | Permet de réinitialiser les champs d'un formulaire |
| onresize | Se déclenche lorsque l'utilisateur redimensionne la fenêtre du navigateur. Cet évènement s'applique à l'objet "window" : window.onresize |
| onselect | Se déclenche lorque l'utilisateur sélectionne du texte sur la page (si l'évènement est associé au <body> ou dans une zone de texte |
| onsubmit | Permet de soumettre le formulaire |
| onunload | Se déclenche lorsque le navigateur va quitter la page courante |
JavaScript dispose également de deux méthodes pour répéter un événement ou le déclencher à retardement.
setInterval() permet de répéter une action
setTimeOut() permet de déclencher une action plus tardivement.
Les temps sont toujours exprimés en millisecondes.
Exemples
Pour lancer une fonction au chargement d’une page :
<body onLoad= 'mafonction()'>
Pour lancer une fonction lors d’un clic :
<p onClick='mafonction()'>
Pour lancer une fonction au passage de la souris :
<img src="..." onMouseOver='mafonction()'>
Permet de déclencher un évenement à retarderment.
setTimeout(function,milliseconds,param1,param2,...)
<img src="..." onMouseOver='setTimeout('mafonction()', 3000)'>
Ne pas oublier de mettre la fonction entre simple quote dans le setTimeout.
Pour charger plusieurs actions, il faut séparer les fonctions par un ";"
<body onLoad="ChangerTitre();AutreFonction()">
1. Avant tout, il faut affecter un id aux éléments HTML
Le nom a peu d'importance, vous pouvez les nommer Truc1, Truc2 et Truc3 par exemple.
Ils ne peuvent bien entendu pas contenir d'espaces ni caracrtères spéciaux.
<p id="Truc1">id Truc 1 sur un bloc de paragraphe.</p>
<p id="Truc2">id Truc2 sur un autre bloc de paragraphe.</p>
<p id="Truc3">id Truc 3 encore sur un autre bloc de parapraphe</p>
2. Notre fonction Javascript
<script>
function ChangerCouleur(Identifiant){
document.getElementById(Identifiant).style.color="red";
}
</script>
Le paramétre passé dans la fonction ne doit bien sûr pas contenir id, name, class etc ... Ce serait source de condusion pour Javascript.
Dans la méthode.getElementById, on utilisera le paramétre de la fonction à la place du id.
A noter, qu'il n'est pas entouré de simple quote comme dans nos précédents exemples.
Revenons sur nos id en HTML
Il faut maintenant appeler la fonction sur l'évenement.
<p onMouseOver="ChangerCouleur(this.id)" id="Truc1">id Truc 1 sur un bloc de paragraphe.</p>
<p onMouseOver="ChangerCouleur(this.id)" id="Truc2">id Truc2 sur un autre bloc de paragraphe.</p>
<p onMouseOver="ChangerCouleur(this.id)" id="Truc3">id Truc 3 encore sur un autre bloc de parapraphe</p>
this.id pour nous permettra de réutiliser la fonction sur d'autres éléments HTML. Il récupére la valeur de l'attribut id Trucx et l'envoie vers la fonction ChangerCouleur(Parametre)
Tester le résultat
id Truc 1 sur un bloc de paragraphe.
id Truc2 sur un autre bloc de paragraphe.
id Truc 3 encore sur un autre bloc de parapraphe
Nous aurions bien sûr pu les mettre sur d'autres balises HTML. Sur une image, il n'y aurait pas d'intérêt puisqu'elle ne changera pas de couleur.
createElement
A développer
Exemples à reprendre :
http://www.w3schools.com/jsref/met_document_createelement.asp