Médiaforma

All posts tagged événements

Certains éléments du DOM génèrent des événements. Je les ai rassemblés dans ce tableau :

Méthode Événement géré
focus() Réception de focus par l’élément
blur() Perte de focus par l’élément
focusin() Réception de focus par l’élément ou un de ses enfants
focusout() Perte de focus par l’élément ou un de ses enfants
resize() Redimensionnement d’un élément
change() Modification d’un élément

 

A titre d’exemple, ce code utilise l’événement blur() pour tester la validité d’une zone de texte dans un formulaire.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Test de la validité d'une zone de texte</title>

  </head>
  <body>
    <script src="jquery.js"></script>
    <table>
    <tr><td>Entrez un nombre compris entre 10 et 20</td><td><input type="text" id="saisie1" autofocus></td></tr>
    <tr><td>Entrez un texte</td><td><input type="text" id="saisie2"></td></tr>
    </table>
    <span id="message"></span>
    <script>
      $(function() {
        $('#saisie1').blur(function(){
          var zone1 = parseInt($('#saisie1').val());
          if ((zone1>=10) && (zone1<=20))
            $('#message').html('La valeur dans la première zone de texte entrée est valide');
          else
            $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');
        });
      });
    </script>
  </body>
</html>

 

Lorsque la première zone de texte perd le focus :

$('#saisie1').blur(function(){

 

Le contenu de la zone de texte est lu et mémorisé sous une forme entière (parseInt()) dans la variable zone1 :

var zone1 = parseInt($('#saisie1').val());

 

Si la valeur saisie est dans la fourchette autorisée, un message est affiché dans le span #message :

if ((zone1>=10) && (zone1<=20))
  $('#message').html('La valeur dans la première zone de texte entrée est valide');

 

Dans le cas contraire, un autre message est affiché dans le span #message :

else
  $('#message').html('La valeur dans la première zone de texte entrée ne respecte pas la consigne');

 

Exercice

Affichez la taille de la fenêtre suite à son redimensionnement

Note : L’élément window représente la fenêtre.

 

Solution

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de la fenêtre au redimensionnement</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <span id="message">Redimensionnez la fenêtre</span>
    <script>
      $(function() {
        $(window).resize(function(){
          var x = $(window).width();
          var y = $(window).height();
          $('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');
        });
      });
    </script>
  </body>
</html>

 

Au redimensionnement de la fenêtre :

$(window).resize(function(){

Les nouvelles dimensions de la fenêtre sont stockées dans les variables x et y :

var x = $(window).width();
var y = $(window).height();

Puis affichées dans le span d’id #message :

$('#message').html('Taille de la fenêtre : ' + x + 'px x ' + y + 'px');

 

Remarque

Quelques autres événements sont dignes d’intérêt :

  • $(élément).load() est levé quand l’élément est entièrement chargé où élément peut être la page (window) ou un élément auquel est associé une URL (img, script, frame ou iframe).

  • $(window).unload() est levé quand l’utilisateur demande à changer de page


Il est possible d’activer/de désactiver dynamiquement un gestionnaire d’événements.

Pour créer un gestionnaire d’événement à la volée, vous appliquerez la méthode on() à l’élément jQuery concerné :

on('événement',function(e){
  //Traitement de l'événement
}

Pour supprimer un gestionnaire d’événements à la volée, vous appliquerez la méthode off() à l’élément jQuery concerné :

off('événement')

 

A titre d’exemple, ce code définit/annule un gestionnaire d’événements lié au clic sur l’image d’identifiant #target :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gestionnaire d'événements dynamique</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <button id="activer">Activer le clic</button>
    <button id="desactiver">Désactiver le clic</button>
    <script>
      $(function() {
        $('#activer').click(function(){
          $('#target').on('click',function(e){
            var largeur = $('#target').width();
            $('#target').css('width',largeur+10);
          });
        });
        $('#desactiver').click(function(){
          $('#target').off('click');
        });
      });
    </script>
  </body>
</html>

 

Lorsque l’utilisateur clique sur le bouton d’identifiant #activer :

$('#activer').click(function(){

Un gestionnaire d’événements est mis en place concernant le clic sur l’image :

$('#target').on('click',function(e){

A chaque clic sur l’image, sa largeur est augmentée de 10 pixels :

var largeur = $('#target').width();
$('#target').css('width',largeur+10);

Lorsque l’utilisateur clique sur le bouton d’identifiant #desactiver, le gestionnaire d’événements lié au clic sur l’image est supprimé :

$('#desactiver').click(function(){
  $('#target').off('click');
});

 

Exercice

En partant du code ci-dessous :

  1. Reliez au premier bouton un gestionnaire d’événements qui affiche les coordonnées du pointeur lorsqu’il est au-dessus de l’image.
  2. Annulez ce gestionnaire d’événements au clic sur le deuxième bouton.
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Gestionnaire d'événements dynamique</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="chat.jpg" draggable><br/>
    Position du pointeur <span id="xy"></span><br/>
    <button id="activer">Afficher la position du pointeur</button>
    <button id="desactiver">Ne pas afficher la position du pointeur</button>
    <script>
      $(function() {
        //Insérer le code ici
      });
    </script>
  </body>
</html>

 

Voici le résultat à obtenir :

 

Solution

Voici le code jQuery à utiliser :

$(function() {
  $('#activer').click(function(){
    $('#target').on('mousemove',function(e){
      var y = e.pageY;
      var x = e.pageX;
      $('#xy').html("x = " + x + ", y = " + y);
    });
  });
  $('#desactiver').click(function(){
    $('#target').off('mousemove');
  });
});

Lorsque le premier bouton est cliqué :

$('#activer').click(function(){

Un gestionnaire d’événements est mis en place sur l’événement mousemove de l’image #target :

$('#target').on('mousemove',function(e){

Les coordonnées du pointeur sont alors affichées dans le span d’id #xy :

var y = e.pageY;
var x = e.pageX;
$('#xy').html("x = " + x + ", y = " + y);

Lorsque le deuxième bouton est cliqué, l’événement mousemove n’est plus pris en compte sur l’image #target :

$('#desactiver').click(function(){
  $('#target').off('mousemove');
});

jQuery est en mesure de réagir aux événements générés par la souris, le clavier et les éléments du DOM. Pour cela, vous devez définir une méthode de gestion événementielle en écrivant quelque chose comme ceci :

$(sélecteur).événement(function(){
  // Gestion de l'événement
});

Où :

  • sélecteur permet de sélectionner un ou plusieurs éléments du DOM
  • événement est le nom de l’événement à gérer.

Certains événements, tels que le démarrage de Windows, l’affichage d’une boîte de dialogue ou la minimisation d’une fenêtre, peuvent provoquer l’émission d’un son. L’association entre sons et événements se fait dans la boîte de dialogue Son. Pour y accéder, tapez son dans l’écran d’accueil, sélectionnez Paramètres dans la liste déroulante, puis cliquez sur Son.

Basculez sur l’onglet Sons. Dans la zone de liste Evénements, lorsqu’un haut-parleur est affiché en regard d’un événement, cela signifie qu’un son est associé à cet événement.

Pour associer un son à un événement, sélectionnez l’événement puis choisissez un son dans la liste déroulante Sons. Si nécessaire, cliquez sur le bouton Parcourir pour désigner un son qui se trouve sur votre disque dur ou sur une mémoire de masse d’un des ordinateurs du réseau local.

Pour supprimer une association entre un événement et un son, sélectionnez l’événement et choisissez (Aucun) dans la liste déroulante Sons.

Si vous le souhaitez, vous pouvez cliquer sur Enregistrer sous pour enregistrer les associations sons/événements définies dans cette boîte de dialogue. Ainsi, vous retrouverez facilement les associations que vous avez définies en utilisant la liste déroulante Modèle de sons.

Lorsque toutes les associations son/événement vous conviennent, cliquez sur OK pour commencer à les utiliser.


Il est possible de capturer plusieurs types d’événements (clics souris, chargement d’une page ou d’une image, passage du pointeur au-dessus d’un élément, etc.) et de les traiter avec du code JavaScript.

  • Pour capturer un événement, insérez l’attribut correspondant (onfocus, onblur, onclick, onresize, onload, onkeypress, etc.) dans l’élément cible et précisez le nom de la procédure JavaScript à exécuter. Lorsque l’événement se produit, le code JavaScript correspondant est exécuté.
  • Pour obtenir le contenu d’un élément en dehors d’un formulaire, on y fait référence par la fonction JavaScript getElementById() et on consulte la valeur de la propriété innerHTML.
  • Pour obtenir la valeur d’un élément de formulaire, on y fait référence par la fonction JavaScript getElementById() et on consulte la valeur de la propriété value.

Cliquez du bouton droit sur le bouton Démarrer. Un menu donnant accès aux outils d’administration apparaît.

Voici quelques informations sur ces outils :

  • Programmes et fonctionnalités permet de désinstaller et de modifier les applications et les fonctionnalités Windows installées.
  • Options d’alimentation permet de choisir ou de personnaliser la gestion de l’alimentation.
  • Observateur d’événements permet d’analyser les événements qui se produisent sur votre ordinateur. Vous utiliserez cet outil pour identifier les problèmes ou les avertissements liés au matériel, aux applications et au système.
  • Système affiche la boîte de dialogue Système, d’où vous aurez une vue d’ensemble de votre ordinateur.
  • Gestionnaire de périphériques donne accès à la boîte de dialogue Gestionnaire de périphériques.
  • Connexions réseau donne accès à une boîte de dialogue dans laquelle vous pourrez gérer vos connexions Ethernet et Wi-Fi.
  • Gestion du disque affiche la configuration de vos unités de masse. Vous utiliserez cette application pour créer, formater et supprimer des partitions.
  • Gestion de l’ordinateur donne accès à un ensemble d’utilitaires, tels que le Planificateur de tâches, l’Analyseur de performances et l’observateur d’événements.
  • Invite de commandes affiche une fenêtre Invite de commandes, pour exécuter des commandes MS-DOS.
  • Invite de commandes (admin) affiche une fenêtre Invite de commandes avec des droits d’administrateur.
  • Gestionnaire des tâches donne des informations sur les tâches en cours d’exécution et les ressources qu’elles utilisent, et permet de mettre fin aux tâches qui ne répondent plus.
  • Panneau de configuration permet de personnaliser l’apparence et le comportement de votre ordinateur.
  • Explorateur de fichiers donne accès aux unités de masse de l’ordinateur et aux ressources partagées du réseau local.
  • Rechercher équivaut à un clic sur la zone de recherche de Cortana.
  • Rechercher affiche le talisman Rechercher.
  • Exécuter affiche la boîte de dialogue Exécuter. Vous l’utiliserez pour lancer un programme ou ouvrir un dossier en tapant son nom.
  • Arrêter ou se déconnecter donne accès aux commandes Se déconnecter, Mettre en veille, Arrêter et Redémarrer.
  • Bureau replie toutes les fenêtres ouvertes et affiche le Bureau.


Certains événements, tels que le démarrage de Windows, l’affichage d’une boîte de dialogue ou la minimisation d’une fenêtre, peuvent provoquer l’émission d’un son. L’association entre sons et événements se fait dans la boîte de dialogue Son. Pour y accéder, cliquez sur Démarrer, tapez son et cliquez sur Modifier les sons système. La boîte de dialogue Son s’affiche, onglet Sons sélectionné :

Dans la zone de liste Evénements, lorsqu’un haut-parleur est affiché en regard d’un événement, cela signifie qu’un son est associé à cet événement.

Pour associer un son à un événement, sélectionnez l’événement puis choisissez un son dans la liste déroulante Sons. Si nécessaire, cliquez sur le bouton Parcourir pour désigner un son qui se trouve sur votre disque dur ou sur une mémoire de masse d’un des ordinateurs du réseau local.

Pour supprimer une association entre un événement et un son, sélectionnez l’événement et choisissez (Aucun) dans la liste déroulante Sons.

Si vous le souhaitez, vous pouvez cliquer sur Enregistrer sous pour enregistrer les associations sons/événements définies dans cette boîte de dialogue. Ainsi, vous retrouverez facilement les associations que vous avez définies en utilisant la liste déroulante Modèle de sons.

Lorsque toutes les associations son/événement vous conviennent, cliquez sur OK pour commencer à les utiliser.