Voir la source de JavaScript/Introduction au DHTML

== Les évènements  ==
Les évènements sont de loin la base du DHTML. Sans eux, le DHTML n'aurait plus aucune possibilité.

=== Qu'est-ce qu'un évènement en DTHML ?  ===

C'est par exemple lorsque vous cliquez sur un lien, que vous fermez une fenêtre, que vous cliquez sur un bouton ou encore lorsque tout bêtement la page se charge. Toute cette liste (et elle est encore très longue) sont des évènements qu'on peut relever en JavaScript (pour ne pas dire DHTML évidemment).

=== Traquer un évènement  ===
La question désormais qui se pose est comment détecter un nouvel évènement sur la page.

La réponse est assez simple : tout simplement en JavaScript. En effet, le langage est doté de plusieurs '''écouteurs d'évènements'''. Chacun d'eux permet de détecter un type d'évènement. Et tous ces écouteurs s'incrustent directement dans les balises HTML concernées. Voici la liste des évènements les plus récurrents :

Tous les évènements commencent par le préfixe '''<u>on</u>''' suivit de l'action qui s'exécute.

==== Liste des écouteurs  ====

{|border="1" align="center" cellpadding="3px" style="border: 1px solid #9c8441;"
|-
| bgcolor="#9c8441" | '''{{centrer|Évènement JS}}'''
| bgcolor="#9c8441" | '''{{centrer|Description}}'''
|-
|<code>onabort</code>
|Se déclenche lorsque l'utilisateur stoppe le chargement de la page.
|-
|<code>onblur</code>
|Se déclenche lorsqu'un élément de la page perd le focus (lorsque l'utilisateur clique ailleurs).
|-
|<code>onchange</code>
|Se déclenche à chaque fois que la valeur d'un champ de donnée voit sa valeur modifiée.
|-
|<code>onclick</code>
|Se déclenche lorsque l'utilisateur clique sur l'élément en question.
|-
|<code>ondblclick</code>
|Se déclenche lorsque l'utilisateur double-clique sur l'élément en question.
|-
|<code>ondragdrop</code>
|Se déclenche lorsque l'utilisateur glisse et dépose (drag and drop) un objet.
|-
|<code>onerror</code>
|Se déclenche lorsqu'une erreur apparaît sur la page (JavaScript 1.1).
|-
|<code>onfocus</code>
|Se déclenche lorsque l'utilisateur donne le focus à un élément (il clique dessus).
|-
|<code>onkeydown</code>
|Se déclenche lorsque l'utilisateur appuie une touche du clavier (JavaScript 1.2).
|-
|<code>onkeypress</code>
|Se déclenche lorsque l'utilisateur maintient une touche du clavier enfoncée.
|-
|<code>onkeyup</code>
|Se déclenche lorsque l'utilisateur relâche une touche du clavier (JavaScript 1.2).
|-
|<code>onload</code>
|Se déclenche lorsque l'utilisateur charge la page.
|-
|<code>onmousedown</code>
|Se déclenche lorsque l'utilisateur appuie sur un bouton de sa souris au-dessus d'un élément de la page.
|-
|<code>onmouseout</code>
|Se déclenche lorsque l'utilisateur ne survole plus un élément de la page (JavaScript 1.1).
|-
|<code>onmouseover</code>
|Se déclenche lorsque l'utilisateur survole un élément de la page.
|-
|<code>onmouseup</code>
|Se déclenche lorsque l'utilisateur arrête d'appuyer sur un bouton de sa souris au-dessus d'un élément de la page.
|-
|<code>onreset</code>
|Se déclenche lorsque l'utilisateur clique sur un input de type reset (réinitialisation d'un formulaire).
|-
|<code>onresize</code>
|Se déclenche lorsque l'utilisateur redimensionne la fenêtre actuelle.
|-
|<code>onselect</code>
|Se déclenche lorsque l'utilisateur sélectionne un texte dans un champ de type text ou textarea.
|-
|<code>onsubmit</code>
|Se déclenche lorsque l'utilisateur soumet un formulaire (soit par un bouton à cliquer soit avec la touche [enter]).
|-
|<code>onunload</code>
|Se déclenche lorsque l'utilisateur quitte la page actuelle.
|-
|}

==== Exemple ====

Par exemple, si vous voulez dire bonjour au visiteur lorsque celui-ci charge une page de votre site, vous devrez procéder de la sorte :

<syntaxhighlight lang="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function direBonjour() {
	alert('Bonjour à vous !');
}
</script>
</head>

<body onload="direBonjour();">
</body>
</html>
</syntaxhighlight>

On aurait évidemment pu mettre le <code>alert</code> directement dans l'évènement sans créer une fonction.
On pourrait ajouter l'évènement <code>onunload</code> qui se déclenche à la fermeture de la page pour appliquer une fonction <code>direAuRevoir()</code> par exemple. Mais cela suffit pour l'exemple.

=== Reconnaissance à la volée  ===
N'importe quel évènement peut aussi être reconnu "à la volée". C'est-à-dire directement depuis la balise <code><script></code>.
Par exemple, voici un code analogue à l'exemple précédent :

<syntaxhighlight lang="html">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
window.onload = direBonjour;

function direBonjour() {
	alert('Bonjour à vous !');
}
</script>
</head>

<body>
</body>
</html>
</syntaxhighlight>

Avec ce code, vous pouvez donc gérer vos évènements depuis le header de votre page. Cela peut être pratique pour s'y retrouver plus facilement.