Médiaforma

All posts tagged evenement

jQuery est souvent utilisé pour ajouter des éléments dans une page Web. Si des événements sont attachés aux éléments de même type déjà existants, il est possible d’attacher les mêmes événements aux nouveaux éléments. En utilisant la délégation événementielle, vous ne serez pas obligé de définir une méthode événementielle pour chacun des nouveaux éléments.

Pour mettre en place une délégation événementielle, vous devez utiliser la méthode on() en lui transmettant trois arguments :

$('#del').on('ev', 'sel', function () {
  //Une ou plusieurs instructions
});

 

Où :

  • del est l’élément dont on souhaite cloner le ou les gestionnaires d’événements ;
  • ev est le nom de l’événement concerné ;
  • sel est un sélecteur qui agit comme un filtre ;
  • function() est la fonction à exécuter lorsque l’événement ev est détecté.

A titre d’exemple, nous allons définir un code permettant de dupliquer un élément div en héritant de sa gestion événementielle.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Délégation événementielle</title>
    <style>
      div {
        background:#cfe;
        font-style: italic;
        cursor:pointer;
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <script src="jquery.js"></script>
    <div id="master">
      <div>Cliquez pour insérer un autre &ltdiv&gt</div>
    </div>
    <script>
      $('#master').on('click', 'div', function(){
        $(this).after('<div>Cet élément a les mêmes caractéristiques que son parent</div>');
      });
    </script>
  </body>
</html>

 

Le corps du document contient deux éléments div imbriqués :

<div id="master">
  <div>Cliquez pour insérer un autre &ltdiv&gt</div>
</div>

 

Au clic sur le div parent :

$('#master').on('click', 'div', function(){

 

Un élément div est inséré après le div parent. Cet élément div a les mêmes caractéristiques que son parent :

$(this).after('<div>Cet élément a les mêmes caractéristiques que son parent</div>');

 

Il est donc possible de cliquer dessus pour insérer un nouvel élément div.

Voici le code généré après deux clics sur un élément div :


Les événements liés au clavier sont très limités. Ils sont résumés dans le tableau suivant :

Méthode Événement géré
keydown() Appui sur une touche du clavier
keyup() Relâchement d’une touche du clavier préalablement enfoncée
keypress() Maintien d’une touche du clavier enfoncée

 

A titre d’exemple, nous allons afficher le keycode ou le charcode de la touche frappée au clavier. Saisissez le code suivant dans NotePad++ et sauvegardez-le sous le nom clavier.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Capture des touches</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les touches du clavier
    <input type="text" id="target" autofocus><br/>
    <span id="compte-rendu"></span>
    <script>
      $(function() {
        $("#target").keypress(function(e) {
        if (e.which == 9) e.preventDefault();
        $('#compte-rendu').html('Code de la touche : ' + e.which);
        });
      });
    </script>
  </body>
</html>

La ligne suivante empêche la propagation de la touche Tab et donc la sortie du champ texte :

if (e.which == 9) e.preventDefault();

 

Voici la liste des codes ASCII retournés par e.which lorsque la fonction keypress() est utilisée :

Caractère ASCII Caractère ASCII Caractère ASCII Caractère ASCII Caractère ASCII
Espace 32 3 51 F 70 Y 89 l 108
! 33 4 52 G 71 Z 90 m 109
34 5 53 H 72 [ 91 n 110
# 35 6 54 I 73 \ 92 o 111
$ 36 7 55 J 74 ] 93 p 112
% 37 8 56 K 75 ^ 94 q 113
& 38 9 57 L 76 _ 95 r 114
39 : 58 M 77 ` 96 s 115
( 40 ; 59 N 78 a 97 t 116
) 41 < 60 O 79 b 98 u 117
* 42 = 61 P 80 c 99 v 118
+ 43 > 62 Q 81 d 100 w 119
, 44 ? 63 R 82 e 101 x 120
45 @ 64 S 83 f 102 y 121
. 46 A 65 T 84 g 103 z 122
/ 47 B 66 U 85 h 104 { 123
0 48 C 67 V 86 i 105 | 124
1 49 D 68 W 87 j 106 } 125
2 50 E 69 X 88 k 107 ~ 126

 

Exercice

Créez un document qui comporte une zone de texte. Capturez l’événement keypress sur cette zone de texte, transformez les touches frappées en majuscules et affichez-les dans la zone de texte.

A titre d’information, pour convertir le code de la touche frappée en un caractère majuscule, vous utiliserez l’expression suivante :

String.fromCharCode(e.keyCode).toUpperCase;

 

Solution

Voici une des solutions possibles (clavier2.htm) :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Capture des touches et transformation en majuscules</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    Appuyez sur les touches du clavier
    <input type="text" id="target" autofocus><br/>
    <script>
      $(function() {
        $("#target").keypress(function(e) {
          var contenu = $('#target').val();
          var frappe = String.fromCharCode(e.keyCode);
          if(e.which>=97 && e.which<=122){
            e.preventDefault(); // Empêche la propagation des touches frappées
            contenu+=frappe;
          }
          $('#target').val(contenu);
        });
      });
    </script>
  </body>
</html>

 

Lorsque l’événement keydown est levé, le contenu de la zone de texte est stocké dans la variable contenu :

var contenu = $('#target').val();

La touche frappée est mémorisée dans la variable frappe :

var frappe = String.fromCharCode(e.keyCode);

S’il s’agit d’une lettre (entre A et Z dont entre le keyCode 65 et 90), la frappe n’est pas propagée :

if(e.which>=65 && e.which<=90){
  e.preventDefault(); // Empêche la propagation des touches frappées

Et le contenu est mis à jour avec la version majuscule de la touche frappée :

contenu+=frappe;

Il ne reste plus qu’à mettre à jour le contenu de la zone de texte :

$('#target').val(contenu);

 

Remarque

Si vous utilisez la fonction keypress(), e.which retourne le code de la touche frappée, en faisant la distinction entre les minuscules et les majuscules. Par contre, si vous utilisez la fonction keydown() ou keyup(), e.which retourne une version simplifiée de la touche frappée, sans faire la distinction entre les minuscules et les majuscules.


Le tableau suivant regroupe les différents événements souris qui peuvent être traités en jQuery :

Méthode Événement géré
click() Clic gauche
dbclick() Double-clic
mousedown() Appui sur le bouton gauche ou droit de la souris alors que le pointeur est au-dessus de l’élément
mouseenter() ou mouseover() Début de survol de l’élément
mouseleave() ou mouseout() Arrêt de survol de l’élément
mousemove() Déplacement du pointeur au-dessus de l’élément
mouseup() Relâchement du bouton gauche ou droit alors que le pointeur est au-dessus de l’élément
scroll() Utilisation de la roulette alors que le pointeur se trouve au-dessus d’un élément concerné par ce type d’événement

 

Ce premier exemple va capturer les coordonnées de la souris au-dessus d’une image et les afficher dans un span. L’événement capturé est onmousemove. Ainsi, à chaque déplacement de la souris, les coordonnées seront mises à jour dans le span. Tapez le code suivant dans Notepad++ et sauvegardez-le dans le fichier mouse-move.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Utilisation de l'événement mousemove</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
        // Gestion du clic et déplacement de l'image
        $("#target").mousemove(function(e) {
          var y = e.pageY;
          var x = e.pageX;
          $('#xy').html("x = " + x + ", y = " + y);
         });
      });
    </script>
  </body>
</html>

 

 

Voici le résultat :

 

Exercice

Tapez ce code dans Notepad++ et sauvegardez-le sous le nom taille-image.htm :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Taille de l'image sur click et mouseout</title>
  </head>
  <body>
    <script src="jquery.js"></script>
    <img id="target" src="desert.jpg"><br/>
    <span id="xy"></span>
    <script>
      $(function() {
      });
    </script>
  </body>
</html>

 

Ecrivez quelques lignes de jQuery pour :

  1. Augmenter la taille de l’image lorsque l’utilisateur clique dessus.
  2. Redonner la taille originale à l’image lorsque le pointeur ne la survole plus.

 

Solution

$(function() {
  $("#target").mousedown(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',largeur+10);
  });
  $("#target").mouseout(function(e) {
    var largeur = $('#target').width();
    $('#target').css('width',160);
  });
});

Définissez un formulaire contenant deux zones de texte pour saisir un prénom et un nom et un bouton de commande input de type button. Mettez en place le code nécessaire pour afficher Bonjour nom prénom au clic sur le bouton.

Vous pouvez mettre la vidéo sur Pause et saisir le code dans votre éditeur de code. Poursuivez la vidéo lorsque tout le code aura été entré.

Solution

Le formulaire de saisie est définie dans le corps du document, entre les lignes 15 et 21.

Pour améliorer l’aspect visuel du formulaire, nous utilisons un tableau, comme dans l’exercice précédent.

Le prénom est saisi dans un champ input de type text et d’identifiant prenom. Quant au nom, il est saisi dans un champ input de type text et d’identifiant nom.

Le bouton a pour libellé “Action”. Lorsqu’il est cliqué, la fonction JavaScript disBonjour() s’exécute.

Remarquez la balise span d’identifiant résultat. Elle sera utilisée par le code JavaScript pour dire bonjour à l’utilisateur.

 

Nous allons maintenant nous intéresser au code JavaScript

Le code correspondant sera saisi entre les balises head et /head, encadré par les balises script et /script.

Le prénom et le nom sont récupérés parf la fonction getElementById().value et stockés dans les variables prenom et nom. Il ne reste plus qu’à afficher la valeur de ces deux variables dans le span d’identifiant resultat

Voyons si ce code fonctionne. Le menu Exécution permet d’exécuter le code dans un navigateur Web. Ici par exemple dans Firefox. Nous saisissons un prénom et nom, puis nous appuyons sur le bouton action. Le message de bienvenue est immédiatement affiché dans le span.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Gestion événementielle</title>
    <script>
      function disBonjour() {
        var prenom = document.getElementById('prenom').value;
        var nom = document.getElementById('nom').value;
        document.getElementById('resultat').innerHTML = 'Bonjour ' + prenom + ' ' + nom;
      }
    </script>
  </head>
  <body>
    <form name="MonFormulaire">
      <table>
        <tr><td>Prénom</td><td><input type="text" id="prenom"></td></tr>
        <tr><td>Nom</td><td><input type="text" id="nom"></td></tr>
        <tr><td><input type="button" value="Action" onclick="disBonjour(); return false;"></td></tr>
      </table>
    </form>
    <br><br><span id="resultat"></span>
  </body>
</html>

Cortana est une assistante personnelle intelligente. Elle vous aide dans vos recherches, à gérer votre calendrier, à obtenir des informations sans utiliser le clavier ni la souris et beaucoup d’autres choses encore…

Une des façons de communiquer avec Cortana consiste à taper du texte dans la zone de saisie, à droite du bouton Démarrer. Cliquez dans cette zone de texte. Cortana vous suggère des informations susceptibles de vous aider à effectuer vos tâches.

Pour arriver à ce résultat, Microsoft collecte et utilise certaines informations personnelles sur votre appareil : localisation, historique des emplacements, contacts, entrée vocale, historique de recherche, détails du calendrier, historique des communications et contenus depuis les messages et applications, entre autres.

A tout moment, vous pouvez ajuster ce que Cortana doit mémoriser dans le Carnet de notes. Cliquez dans la zone de texte à droite du bouton Démarrer, puis cliquez sur l’icône Carnet de notes. Les entrées affichées sous Carnet de notes permettent de personnaliser le comportement de Cortana :

Par exemple, en cliquant sur A propos de moi, vous pouvez modifier le nom que Cortana utilise pour vous désigner ou encore définir vos lieux favoris, tels que votre domicile ou votre travail :

Un autre exemple : en cliquant sur Actualités, vous indiquez à Cortana si vous voulez qu’elle vous communique les articles et informations de dernière minute :

Ou encore, en cliquant sur Finances, vous indiquez les actions de bourse que vous voulez suivre :