NuxBSD: Free Infos

Retour d'un niveau
Retour à l'accueil

Infos couleurs :

• méthode
• propriété
• élément HTML
• événement
• objet

Dans ce chapitre on va apprendre à utiliser les événements sans le DOM avec le DOM-0 puis avec le DOM-2.

Les événements permettent de déclencher une fonction selon qu'une action s'est produite ou pas.

Exemple: lorsque un élément HTML est survolé par la souris, une fenêtre alert() apparaît.
L'utilisateur fera alors une action sur l'élément HTML pour déclencher la fonction JavaScript.

- Ils existent des événements pour les plateformes mobiles, smartphone, tablettes, etc … mais plus principalement pour les ordinateurs.

Voici une liste des événements principaux :

Attention: il existe aussi deux événements spécifiques à l'élément HTML form :

Le focus définit ce qui peut être appelé le « ciblage » d'un élément HTML.
Lorsqu'un élément HTML est ciblé, il va recevoir tous les événements du clavier. Un exemple simple est d'utiliser un élément HTML input de type text : si on clic dessus alors l'input possède le focus. Autrement dit : il est ciblé, et si on tape des caractères sur le clavier on peut les voir s'afficher dans l'élément HTML input en question.
Le focus peut s'appliquer à de nombreux éléments HTML, ainsi, si on tape sur la touche Tabulation du clavier alors que l'on est sur une page Web, on peut avoir un élément HTML de ciblé ou de sélectionné qui recevra alors tout ce que l'on tape sur le clavier. Par exemple, si on a un lien de ciblé et que l'on tape sur la touche Entrée du clavier alors on sera redirigé vers l'URL contenue dans ce lien.

Sans le DOM c'est à dire sans passer par l'API DOM dans les balises HTML et ajouter du code javScript directement dans les balises HTML!

<span onclick="alert('Hello !');">Cliquez-moi !</span>

- lorsque l'on clic sur le texte “Cliquez-moi !” l'événement onclick lance la méthode alert() affichant Hello!

Dans cet exemple il suffit de cliquer sur le texte pour que la boîte de dialogue s'affiche.

Afin d'obtenir ce résultat nous avons ajouté à notre élément HTML span un attribut contenant les deux lettres «on» et le nom de notre événement «click», nous obtenons donc «onclick».
Cet attribut possède une valeur qui est un code JavaScript, on peut y écrire quasiment tout ce que l'on souhaite, mais tout doit tenir entre les guillemets de l'attribut.

Ce mot clé est une propriété qui pointe sur l'objet qui est actuellement en cours d'utilisation.
Si on fait appel à ce mot-clé lorsqu'un événement est déclenché, l'objet pointé sera l'élément HTML qui a déclenché l'événement.
Dans cette exemple plus bas ce sera le contenu de l'élément HTML span donc “Cliquez-moi !”.

<span onclick="alert('Voici le contenu de l\'élément HTML que vous avez cliqué :\n\n' + this.innerHTML);">Cliquez-moi !</span>

Explication sur le focus

<input id="input" type="text" size="50" value="Cliquez ici !" onfocus="this.value='Appuyez maintenant sur votre touche de tabulation.';" onblur="this.value='Cliquez ici !';">
<br /><br/>
<a href="#" onfocus="document.getElementById('input').value = 'Vous avez maintenant le focus sur le lien, bravo !';">Un lien bidon</a>

• lorsque l'on clic sur input, celui-ci possède le focus
• il exécute l'événement et affiche un texte demandant d’appuyer sur la touche tabulation
• l'appui sur tabulation permet de faire passer le focus à l’élément HTML suivant (bref on fait perdre le focus à l'élément HTML input), ce qui déclenche l'événement blur à la perte du focus
• le focus perdu passe alors sur le lien qui affiche alors son message grâce à son événement focus

Pour bloquer l'action par défaut d'un événement il suffit d'ajouter return false;

Exemple sans bloquer l'action par défaut

<a href="http://www.siteduzero.com" onclick="alert('Vous avez cliqué !');">Cliquez-moi !</a>

Détails :

1. on clic sur le lien “Cliquez-moi !”
2. l'événement onclick déclenche la fonction alert()
3. la fonction alert() va afficher une fenêtre avec un bouton “OK”, c'est ce bouton “OK” qui est l'action par défaut de l'événement - en cliquant sur “OK” on est ensuite redirigé vers l'url “http://www.siteduzero.com” Exemple en bloquant l’action par défaut
   <code html> <a href=“http://www.siteduzero.com” onclick=“alert('Vous avez cliqué !'); return false;”>Cliquez-moi !</a> </code> Détails - on clic sur le lien “Cliquez-moi !” (élément HTML a) - l'événement onclick déclenche la fonction alert() - la fonction alert() va afficher une fenêtre avec un bouton “OK”, c'est ce bouton “OK” qui est l'action par défaut de l'événement, ici cet événement sera donc bloqué
4. l'url de redirection “http://www.siteduzero.com” ne fonctionne donc pas

Ce genre de code est interdit !! C'est une vielle méthode devenue obsolète qui permet d'insérer du code JavaScript directement dans l'attribut href en ajoutant le mot clef javascript: au début de l'attribut.

<a href="javascript: alert('Vous avez cliqué !');">Cliquez-moi !</a>

Il est conseillé d'utiliser ce genre de code

<a href="#" onclick="alert('Vous avez cliqué !'); return false;">Cliquez-moi !</a>

Avantage : on libère l'attribut href

En mettant un return false; on empêche l'action par défaut de l'événement d'exécuter la redirection vers le haut grâce aux sigle #
Le bouton “OK” de alert() est bloqué
Tout simplement parce que le dièse redirige tout en haut de la page Web, ce qui n'est pas ce que l'on souhaite. On bloque donc cette redirection avec notre petit bout de code.

Maintenant que nous avons vu l'utilisation des événements sans le DOM, nous allons passer à leur utilisation au travers de l'interface implémentée par Netscape que l'on appelle le DOM-0 puis au standard actuel : le DOM-2.

Cette interface reste très pratique pour créer des événements et peut encore être préférée au DOM-2.

<span id="clickme">Cliquez-moi !</span>
 
<script>
    var element = document.getElementById('clickme'); // atteint l'élément HTML par son id 'clickme'
     element.onclick = function() {
        alert("Vous m'avez cliqué !");
    };
</script>

Détails

• on récupère l'élément HTML dont l'id est 'clickme';
• on accède à la propriété onclick et on lui assigne ensuite une fonction anonyme;
• dans la fonction anonyme on fait appel appel à la fonction alert() avec un texte en paramètre.

element.onclick = function() {};

Inconvénients : Le DOM-0 est vieux et il ne permet pas de créer plusieurs fois le même événement !

Concernant la méthode sans les DOM, on ne peut pas utiliser l'objet Event qui apporte un mine d'informations sur l'événement qui est déclenché.
Concernant le DOM-0, il est vieux et ne permet pas de créer plusieurs fois le même événement.
Le DOM-2, permet la création multiple d'un même événement et il gère l'objet Event.

Attention : Il est fortement d'utiliser le DOM-2 pour l'ajout de librairies au sein d'un site web

Car si les librairies ajoutent des événements DOM-0 aux éléments HTML il risque d'y avoir deux problèmes:

1. les librairies sont mauvaises, elle ne font pas ce qu'on leur demande, il faut donc en trouver d'autres
2. les évènements de notre propre code seront écrasés ou bien ils écraseront les événements des librairies

Exemple avec l'événement click

<span id="clickme">Cliquez-moi !</span>
 
<script>
    var element = document.getElementById('clickme'); // atteint l'id de l'élément HTML 
 
    element.addEventListener('click', function() { //on lui ajout une méthode ayant 3 propriétés
        alert("Vous m'avez cliqué !");
    }, false);
 
</script>

Ici la grande nouveauté est la méthode addEventListener() qui est composé de trois paramètres.

1. le nom de l'événement (sans les lettres «on»); 'click'
2. la fonction anonyme à exécuter
3. un booléen pour spécifier si l'on souhaite utiliser la phase de capture ou de bouillonnement

Explications

• appel de la méthode addEventListener() avec trois paramètres :
  1. ('click', nom de l'événement
  2. function() {alert(“Vous m'avez cliqué !”);}, code de la fonction anonyme
  3. false); type de phase, bouillonnement

On peut aussi écrire ce code d'une façon plus rapide en créant une fonction à la base.

var element = document.getElementByID('clickme');
 
var myfunction = function(){alert("Vous m'avez cliqué !");}
element.EventListener('click', myfunction, false);

Le DOM-2 permet de créer plusieurs événements identique comme l'événement click

<span id="clickme">Cliquez-moi !</span>
 
<script>
    var element = document.getElementById('clickme');
 
    // Premier événement click
    element.addEventListener('click', function() {
        alert("Et de un !");
    }, false); // bouillonnement
 
    // Deuxième événement click
    element.addEventListener('click', function() {
        alert("Et de deux !");
    }, false); // bouillonnement
</script>

Attention : dans cet exemple l'ordre de déclenchement est aléatoire !

La méthode removeEventListener() permet de supprimer un événement.

element.addEventListener('click', myFunction, false); // On crée l'événement
 
element.removeEventListener('click', myFunction, false); // On supprime l'événement en lui repassant les mêmes paramètres

Toute suppression d'événement avec le DOM-2 se fait avec les mêmes paramètres utilisés lors de sa création !

Attention : Cela ne fonctionne pas aussi facilement avec les fonctions anonymes !
Tout événement DOM-2 créé avec une fonction anonyme est particulièrement complexe à supprimer, car il faut posséder une référence vers la fonction concernée, ce qui n'est généralement pas le cas avec une fonction anonyme.
C'est pour cela qu'il est plutôt conseiller de mettre la partie 2 (le paramètre qui contient la fonction anonyme) de la méthode addEventListener() dans une fonction qui devient alors la référence de la fonction anonyme.

var element = document.getElementByID('clickme');
 
var myfunction = function(){alert("Vous m'avez cliqué !");}
element.EventListener('click', myfunction, false);

Attention : Les version d'IE antérieurs à la versions 9 ne supportent l'ajout d'évènements DOM-2

On détermine le type de phase dans le paramètre trois de la méthode addEventListener(), soit capture ou bouillonnement !

Ces deux phases sont deux étapes distinctes de l’exécution d'un événement !

La phase de capture, s'exécute avant le déclenchement de l'événement.
La phase de bouillonnement, s'exécute après que l'élément HTML aie été déclenché.
Ces deux phases permettent de définir le sens de propagation des événements !

C'est le sens dans lequel va se propager l'événement.

Explication

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" />
   </head>
   <body>
      <section>
         <div>
            <a href="#" onClick="f()">Hyperlien</a>
         </div>
      </section>
   </body>
</html> 

Nous avons placé un gestionnaire d'événements sur le lien de l'élément HTML a en faisant appel à la fonction f() (que je n'ai pas défini, car ce n'est pas ce qui nous intéresse ici). Alors, logiquement, c'est le texte “Hyperlien” du lien hypertexte qui est concerné par l'événement click. Cependant , les choses ne se déroulent pas aussi simplement.

Hiérarchie

Chacun des rectangles représente un objet déclaré dans le dernier code (l'objet document étant le document lui même).
Le fait de cliquer sur l'hyperlien (objet A), revient à cliquer également sur son conteneur qui est l'objet DIV, ce qui implique qu'on a aussi cliqué sur son parent qui est l'objet SECTION ce qui signifie aussi qu'on a cliqué sur leur parent à tous, l'objet DOCUMENT.

Le flux de propagation de l'événement click évolue comme ceci:

1. Phase capture: L'événement se propage du haut en bas, c'est à dire de l'objet du plus haut niveau (dans la hiérarchie) à l'objet du plus bas niveau sur lequel la souris est placée au moment du déclenchement de l'événement. Cette phase s'appelle la capture.
2. Phase bouillonnement (bubbling): Une fois que l'événement a atteint la cible, il se propage dans le sens inverse en remontant la hiérarchie jusqu'à atteindre l'objet document. Cette phase s'appelle bouillonnement (bubbling en anglais).

Et pour finir, un lien vers la spécification du W3C concernant ces phases si vous avez envie d'aller plus loin. Il est conseillé de regarder ce lien ne serait-ce que pour voir le schéma fourni qui explique bien le concept de ces phases.

L'objet Event sert à fournir une multitude d'informations sur l'évènement actuellement déclenché

Récupérer par exemple

• quelles sont les touches actuellement enfoncées
• les coordonnées du curseur
• l'élément HTML qui a déclenché l'évènement
• etc…

Attention : l'objet Event n'est qu'accessible uniquement lorsqu'un évènement est déclenché.

Son accès ne peut se faire que dans une fonction exécutée par un évènement.

Dans le DOM-0

element.onclick = function(e) { // L'argument « e » va récupérer une référence vers l'objet « Event »
    alert(e.type); // Ceci affiche le type de l'événement (click, mouseover, etc.)
};

Dans le DOM-2

element.addEventListener('click', function(e) { // L'argument « e » va récupérer une référence vers l'objet « Event »
    alert(e.type); // Ceci affiche le type de l'événement (click, mouseover, etc.)
}, false);

On connait la propriété type qui permet de savoir quel type d'évènement s'est déclenché.
Bien sur l'objet Event possède beaucoup d'autres propriétés et méthodes.

La propriété target est une des propriété les plus importante de l'objet Event.
Elle permet de récupérer une référence vers l'élément HTML dont l’événement a été déclenché (exactement comme this pour les événements sans le DOM ou avec le DOM-0).
De cette façon cela permet de modifier le contenu d'un élément HTML qui a été cliqué.

<span id="clickme">Cliquez-moi !</span>
<script>
    var clickme = document.getElementById('clickme'); // 1
 
    clickme.addEventListener('click', function(e) {   // 2
        e.target.innerHTML = 'Vous avez cliqué !';    // 3
    }, false);
</script>

Test du code

1. on attrape l'élément HTML par son id 'clickme' et on l'a stock dans var clickme
2. on passe la méthode addEventListener() à la var clickme en lui passant 3 paramètres :
   1. un événement click
   2. une fonction anonyme avec un paramètre e
   3. on donne au paramètre e la propriété target ce qui va permettre d'atteindre l'élément HTML ciblé, ensuite on lui applique la propriété innerHTML qui va changer le contenu de l'élément HTML
3. phase de bouillonnement (hiérarchie : du bas vers le haut)

Attention : Certains événements appliqués à un élément HTML parent peuvent se propager d'eux-mêmes aux éléments HTML enfants !
C'est le cas des événements mouseover, mouseout, mousemove, click … ainsi que d'autres événements moins utilisés.

<p id="result"></p>
<div id="parent1">
    Parent
    <div id="child1">Enfant N°1</div>
    <div id="child2">Enfant N°2</div>
</div>
 
<script>
    var parent1 = document.getElementById('parent1');
    var  result = document.getElementById('result');
 
    parent1.addEventListener('mouseover', function(e) {
        result.innerHTML = "L'élément déclencheur de l'événement \"mouseover\" possède l'ID : " + e.target.id;
    }, false);
</script>

Test du code
Ici la propriété target va toujours renvoyer l'élément HTML déclencheur de l'événement mouseover lorsque l'on passe dessus. (il renvoie l'id des élément HTML)
Mais ce que l'on souhaite c'est obtenir l'élément HTML sur lequel a été appliqué l'événement mouseover, c'est à dire l'élément HTML à l'origine de cet événement (l'élément parent et non ses enfants).

Il suffit d'utiliser la propriété currentTarget qui a renvoyer l'élément HTML.
L'id affiché ne changera jamais.

<script>
result.innerHTML = "L'élément déclencheur de l'événement \"mouseover\" possède l'ID : " + e.currentTarget.id;
</script>

Test du code

Pour récupérer la position du curseur il existe deux propriétés :

• clientX pour la position horizontale
• clientY pour la position verticale

L'événement le plus adaptè est mousemove.

<div id="position"></div>
<script>
    var position = document.getElementById('position'); // 1
 
    document.addEventListener('mousemove', function(e) { // 2
        position.innerHTML = 'Position X : ' + e.clientX + 'px<br />Position Y : ' + e.clientY + 'px';
        // Avec console.log()
        //console.log(position.innerHTML = 'Position X: ' + e.clientX + ' px' + '<br />' + 'Position Y: ' + e.clientY + ' px');
    }, false);
</script>

Test du code

1. on attrape l'élément HTML par son id 'position' et on l'a stock dans var position
2. on passe méthode addEventListener() à l'objet document en lui passant 3 paramètres :
   1. un événement mousemove
   2. une fonction anonyme avec un paramètre e
   3. on passe la propriété innerHTML à la variable positon en leur donnant comme valeur :
      1. l'argument e de la fonction anonyme avec la propriété clientX ce qui va permettre de récupérer la position X
      2. l'argument e de la fonction anonyme avec la propriété clientY ce qui va permettre de récupérer la position Y
3. phase de bouillonnement (hiérarchie : du bas vers le haut)

La proriété relatedTarget ne s'utilise qu'avec les événements mouseover et mouseout.
Cette propriété remplit deux fonctions différentes selon l'événement utilisé :

• avec l'événement mouseout elle fournira l'objet de l'élément HTML sur lequel le curseur vient d'entrer
• avec l'événement mouseover elle fournira l'objet de l'élément HTML dont le curseur vient de sortir

<p id="result"></p>
 
<div id="parent1">
    Parent N°1<br />
    Mouseover sur l'enfant
    <div id="child1">Enfant N°1</div>
</div>
 
<div id="parent2">
    Parent N°2<br />
    Mouseout sur l'enfant
    <div id="child2">Enfant N°2</div>
</div>
 
<script>
    var child1 = document.getElementById('child1');
    var child2 = document.getElementById('child2');
    var result = document.getElementById('result');
 
    // evenement mouseover
    child1.addEventListener('mouseover', function(e) {
        result.innerHTML = "L'élément quitté juste avant que le curseur n'entre sur l'enfant n°1 est : " + e.relatedTarget.id;
    }, false);
 
    // evenement mouseout
    child2.addEventListener('mouseout', function(e) {
        result.innerHTML = "L'élément survolé juste après que le curseur ait quitté l'enfant n°2 est : " + e.relatedTarget.id;
    }, false);
</script>

Test du code

La récupération des touches frappées se fait par le biais de trois événements différents.
Il y a deux événements keyup et keydown qui permettent de capter toute les touches frappés au clavier mais aussi en plus l'événement keypress qui capte les combinaison de touches.

Plusieurs événements distincts :

• keyup se déclenche lors du relâché de touche
• keydown se déclenche lors de la pression de touche (comme mousedown)

Attention : toutes les touches retournant un caractère retournerons un caractère majuscule, que la touche Maj soit pressée ou non.

• keypress permet de capter les combinaisons de touches comme par exemple MAJ + A

Les propriétés capables de fournir une valeur :

• keyCode
• charCode
• which

Ces trois propriétés renvoient chacune un code ASCII correspondant à la valeur de la touche pressée.

<p>
    <input id="field" type="text" />
</p>
 
<table>
    <tr>
        <td>keydown</td>
        <td id="down"></td>
    </tr>
    <tr>
        <td>keypress</td>
        <td id="press"></td>
    </tr>
    <tr>
        <td>keyup</td>
        <td id="up"></td>
    </tr>
</table>
 
<script>
    // capture de l'id
    var field = document.getElementById('field'),
        down = document.getElementById('down'),
        press  = document.getElementById('press'),
        up  = document.getElementById('up');
 
    //on place les écouteurs sur le type d'événements
    document.addEventListener('keydown', function(e) {
        down.innerHTML = e.keyCode;
    }, false);
 
    document.addEventListener('keypress', function(e) {
        press.innerHTML = e.keyCode;
    }, false);
 
    document.addEventListener('keyup', function(e) {
        up.innerHTML = e.keyCode;
    }, false);
</script>

Test du code

Et pour récupérer uniquement le caractère ?
Il existe qu'une seule solution, la méthode fromCharCode() qui prend en paramètre une infinité d'arguments.
Elle est utilisée avec le préfixe String.

String.fromCharCode(/* valeur */);

Attention : la méthode fromCharCode() est conçue pour convertir les valeurs ASCII en caractères lisibles donc il ne faut utiliser cette méthodes qu'avec un événement keypress afin de ne pas afficher le caractère correspondant à la touche CTRL.

String.fromCharCode(84, 101, 115, 116); // Affiche : Test

Sans le DOM-2 cette opération était très simple, il suffisait de mettre return false; dans l'événement.

Avec l'objet Event il suffit de lui mettre une méthode preventDefault() ce qui va bloquer l'action par défaut de l'événement.

<a id="link" href="http://www.siteduzero.com">Cliquez-moi !</a>
 
<script>
    var link = document.getElementById('link');
    link.addEventListener('click', function(e) {
        e.preventDefault(); // On bloque l'action par défaut de cet événement
        alert('Vous avez cliqué !');
    }, false);
</script>

Test du code

Retour d'un niveau
Retour à l'accueil