Médiaforma

jQuery – Gérer dynamiquement les gestionnaires d’évènements

Print Friendly

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');
});
Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply