Module 5 : Interagir avec le modèle

d'objet de document (DOM)

Séquence 5.2 : La gestion des événements HTML
 Séquence 5.2 : La gestion des
événements HTML

Développement Web – Faycel CHAOUA & Houda TOUKABRI 26

 Plan

DÉCOUVERTE DES LA MÉTHODE LA MÉTHODE L’OBJET EVENT

ÉVÉNEMENTS ADDEVENTLISTENER() ATTACHEVENT()

Développement Web – Faycel CHAOUA & Houda TOUKABRI 27

 Découverte des
événements

Développement Web – Faycel CHAOUA & Houda TOUKABRI 28

 Découverte des événements
• Un événement est une action effectuée par un utilisateur ou par le navigateur lui-même.

• L’utilisation de this fait référence à l’objet (élément HTML) qui est le sujet de l’événement.

• Deux manières de réagir aux évènements :

• utiliser des propriétés qui vont assigner un gestionnaire d’événement à un élément

spécifique.

• utiliser la méthode addEventListener() (ou attachEvent()).

Développement Web – Faycel CHAOUA & Houda TOUKABRI 29
 Découverte des événements

Quelques attributs HTML de type événement :

• onload : se déclenche après le chargement de la page.

• onunload : se déclenche lors de la fermeture de la page.

• onbeforeunload : se déclenche juste avant la fermeture de la fenêtre.

• onclick : se déclenche lorsque l’utilisateur clique sur un élément.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 30

 Découverte des événements
• ondblclick : se déclenche lors d'un double-clic (sur le bouton gauche).

• onmousedown : se déclenche quand on enfonce le bouton de la souris (un clic gauche

ou un clic droit).

• onmouseup : se déclenche quand on relâche le bouton de la souris (un clic gauche ou

un clic droit).

• onmousemove : se déclenche lorsque la souris se déplace dans un objet du document.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 31

 Découverte des événements
• onmouseover : se déclenche lorsque l’utilisateur passe le curseur de sa souris sur un
élément.

• onmouseout : se déclenche lorsque l’utilisateur sort son curseur d’un élément.

• onkeydown : se déclenche lorsque l’utilisateur appuie sur une touche de son clavier sans la
relâcher avec son curseur sur l’élément.

• onkeyup : se déclenche quand on relâche la touche.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 32

 Découverte des événements

• onkeypress : se déclenche quand on enfonce une touche du clavier.

• onblur : se déclenche quand l'élément perd le focus.

• onfocus : se déclenche quand l'élément a le focus.

• onchange : se déclenche quand l'élément perd le focus et que son contenu a changé.

• onselect : se déclenche quand le contenu d'un élément est sélectionné.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 33

 Découverte des événements
• onsubmit : se déclenche juste avant l'envoi d'un formulaire.
• onreset : se déclenche lors de la réinitialisation du formulaire.
• onscroll : se déclenche lors de l'utilisation de la barre de défilement.
• onbeforeprint : se déclenche avant l'impression (après le clic sur le bouton Ok de la
fenêtre d'impression).

• onafterprint : se déclenche après l'impression.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 34
 Découverte des événements
• oncopy : se déclenche lors du copier vers le presse-papier.
• onpaste : se déclenche lors du coller depuis le presse-papier.
• ondragdrop : se déclenche lors d’un glisser-déposer sur la fenêtre du navigateur.
• onerror : se déclenche lorsqu'une erreur apparaît durant le chargement de la page.
• onresize : se déclenche lorsque la fenêtre du navigateur est redimensionnée.
• onabort : se déclenche lorsque le chargement de l'image est interrompu.
Développement Web – Faycel CHAOUA & Houda TOUKABRI 35
 Découverte des événements

Exemple :

<h1 onclick="changerTexte(this)">Cliquer ce texte!</h1>

<script>
function changerTexte(id) {
id.innerHTML = "Nouveau texte";
}
</script>

Développement Web – Faycel CHAOUA & Houda TOUKABRI 36

 La méthode
addEventListener()

Développement Web – Faycel CHAOUA & Houda TOUKABRI 37

 La méthode addEventListener()

La méthode addEventListener() :

• permet de lier du code à un évènement.

• permet de lier plusieurs gestionnaires d’évènements de même type sur un élément HTML.
• possède deux arguments :
• le nom de l’évènement déclencheur de l'action.
• le code relatif à l’action à effectuer.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 38

 La méthode addEventListener()
<button id="monBtn">Tester</button>
<script>
// Code compatible avec tous les navigateurs sauf IE
var x = document.getElementById("monBtn");
x.addEventListener("click", maFonction);
x.addEventListener("mouseout", autreFonction);
function maFonction() { alert ("Hello World!"); }
function autreFonction() { alert ("Ceci est également exécuté!"); }
</script>
Développement Web – Faycel CHAOUA & Houda TOUKABRI 39
 La méthode
attachEvent()

Développement Web – Faycel CHAOUA & Houda TOUKABRI 40

 La méthode attachEvent()

La méthode attachEvent() :

• a le même rôle que la méthode addEventListener().

• compatible avec les navigateurs Internet Explorer (≤ 8) et Opera (≤ 6.0).
• possède deux arguments :
• le nom de l’évènement déclencheur de l'action.
• le code relatif à l’action à effectuer.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 41

 La méthode attachEvent()
<button id="monBtn">Tester</button>
<script>
// Code compatible avec le navigateur IE
var x = document.getElementById("monBtn");
x.attachEvent("onclick", maFonction);
x.attachEvent("onmouseout", autreFonction);
function maFonction() { alert ("Hello World!"); }
function autreFonction() { alert ("Ceci est également exécuté!"); }
</script>
Développement Web – Faycel CHAOUA & Houda TOUKABRI 42
 L’objet event

Développement Web – Faycel CHAOUA & Houda TOUKABRI 43

 L’objet event

• n’est accessible que durant le déclenchement d’un évènement.

• sa propriété target retourne le type de l’élément qui a déclenché l’évènement.
• sa propriété currentTarget retourne le type de l’élément portant le gestionnaire de
l’évènement déclenché.

• sa propriété type de l’objet event va tout simplement retourner le type d’évènement qui a
été déclenché.

Développement Web – Faycel CHAOUA & Houda TOUKABRI 44

 L’objet event
// Script compatible avec le navigateur IE
function position(ev) {
var Xfen, Yfen, el;
Xfen = ev.clientX; Yfen = ev.clientY;
el = document.getElementById("idMouse");
el.innerHTML = " Xfen= " + Xfen + " px ; Yfen= " + Yfen + " px";
}
window.onload=function(){ document.onmousemove=position; }

Développement Web – Faycel CHAOUA & Houda TOUKABRI 45