Les évenements

Interactions hommes - machines (IHM)

python

HTML (ou Hypertext Markup Language) permet de créer la structure d’une page internet. Grâce à un jeu de balises, il permet de décomposer la page comme un traitement de texte : titre, sous-titre, section,…

On peut par exemple indiquer que l’on utilise un titre avec les balises ouvrante et fermante <h1></h1> ou indiquer l’utilisation d’une énumération avec <ol></ol> et <li></li> pour chaque item. CSS (ou Cascade Style Sheets) permet la mise en forme des différents éléments HTML. On peut ainsi modifier la couleur ou la police des éléments précédents. Les pages ainsi créées sont statiques c’est-à-dire que l’interaction avec l’utilisateur est réduite à la possibilité de cliquer sur un lien hypertexte présent dans la page.

On peut dynamiser la page internet de deux manières :

  • soit du côté serveur avec PHP (ou Hypertext Preprocessor) qui peut, par exemple, ajouter le résultat d’une requête à une base de données dans la page qui sera fournie au navigateur ;
  • soit du côté client avec JavaScript qui peut, par exemple, faire apparaître des info-bulles contextuelles ou réaliser des animations.

Considérons l’exemple suivant :

<!DOCTYPE HTML>
<html>
<body>
<ol id="liste">
<li id="item1" onclick="changetexte(this.id)">Un</li>
<li id="item2" onclick="changetexte(this.id)">Deux</li>
</ol>
<script>
function changetexte(ident) {
 var obj = document.getElementById(ident);
 alert(obj.firstChild.nodeValue)
 }
</script>
/body>
/html>

Dans un navigateur, cette page html a l’aspect suivant :

  1. Un
  2. Deux

Un clic sur l’un des deux items provoque l’apparition d’une alerte avec le texte associé.
Deux éléments ont été mis en place pour obtenir ce comportement : une fonction définie dans le script et un appel à cette fonction au niveau des éléments de la liste. onclick est un gestionnaire d’événements : il permet de déclencher une action quand un événement, ici un clic gauche sur l’élément, survient.
Dans la fonction changetext de paramètre ident, on commence par définir la variable obj et on lui affecte l’objet sur lequel on a cliqué. Le mot clé document fait référence à la page HTML. Lors de la création du rendu de la page HTML, le DOM (ou Document Object Model) est créé. Il représente la structure de la page HTML sous la forme d’un arbre ramifié. Chaque niveau est un noeud et le niveau hiérarchique le plus faible est le texte. Cela permet de comprendre la manière dont on accède, en JavaScript, au texte associé à chaque élément de la liste en utilisant la propriété en lecture seule firstChild qui renvoie le premier noeud de l’objet puis la propriété nodeValue qui permet de lire ou d’écrire la valeur de ce premier noeud.
Lors de l’appel de la fonction, le paramètre transmis utilise le mot clé this qui permet de faire référence à l’élément à partir duquel l’appel a été réalisé.

La définition de la fonction permet d’observer deux éléments de la syntaxe de JavaScript :

  • Lors d’une succession d’instructions, celles-ci se terminent par un ;.
  • Si celles-ci appartiennent au même bloc d’instructions, on les entoure d’accolades.

Il est préférable de séparer HTML de JavaScript.
Les nouveaux codes sont alors :

<!DOCTYPE HTML>
<html>
<body>
<ol id="liste">
<li id="item1">Un</li>
<li id="item2">Deux</li>
</ol>
<script src="fonction2.js" />
</body>
</html>
var objets = document.querySelectorAll('li');
function change_texte(e) {
alert(e.target.firstChild.nodeValue)
}
for (var i = 0; i < objets.length; i++) {
 objets[i].onclick = change_texte
 }

Le code JavaScript commence par récupérer la liste de tous les items de type <li>. A chacun de ces objets, on associe le gestion- naire d’événement onclick qui réalisera l’appel à la fonction change_texte. Une nouveauté dans la définition de la fonction est le paramètre e qui représente l’événement lors de l’appel de la fonction. e.target permet de récupérer l’objet sur lequel le clic a été effectué.

on peut aussi utiliser myElement.removeEventListener pour retirer un objet de l’écouteur d’événements.
On peut citer quelques gestionnaires d’événements :

  • myElement.onfocus et myElement.onblur qui déclenchent un événement lorsque l’objet est activé ou non grâce à l’utilisation de la touche de tabulation.
  • window.onkeypress, window.onkeydown et window.onkeyup qui réagissent si on appuie et relâche une touche, si l’appui est maintenu et si la touche est relâché respectivement. Ces événements sont obligatoirement liés à la fenêtre du navigateur.
  • myElement.onmouseover et myElement.onmouseout qui réagissent lors du survol de l’élément et de l’arrêt de celui-ci.

Les événements sont munis de propriétés : un événement MouseEventpossède des propriétés de position MouseEvent. screenX, MouseEvent.screenY, de bouton cliqué MouseEvent.button, etc.

A faire vous même

Créer le fichier et la fonction javascript qui permet de changer la couleur de la DIV toto avec un clic. 
<!DOCTYPE HTML>
<html>
<body>
<p>Cliquer sur le texte suivant :<p>
<div id="toto">Abracadabra : Mon texte qui doit être en rouge !</div>
<script src="fonction2.js" />
</body>
</html>

Voir une solution