• Facile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Plus loin dans la gestion événementielle

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Arrivés à ce point dans la lecture du cours, vous savez comment mettre en place une gestion événementielle en rapport avec la souris, le clavier et les éléments affichés sur une page Web. Je vous propose d'aller plus loin en vous faisant découvrir comment gérer plusieurs événements avec une seule méthode, déclencher des événements avec du code jQuery ou encore utiliser la délégation d'événements pour limiter le code.

Événements personnalisés

Sans le savoir, vous avez utilisé la version simplifiée de la méthodeon()dans toutes les méthodes événementielles étudiées jusqu'ici. Le tableau suivant donne quelques correspondances entre les méthodes traditionnelles et les méthodeson()équivalentes.

Méthode traditionnelle

Méthode on() équivalente

$(sel).click(function() {…})

$(sel).on('click', function() {…})

$(sel).scroll(function() {…})

$(sel).on('scroll', function() {…})

$(sel).keydown(function() {…})

$(sel).on('keydown', function(){…})

$(sel).focus(function() {…})

$(sel).on('focus', function() {…})

$(sel).load(function() {…})

$(sel).on('load', function() {…})

Dans toutes ces expressions,selreprésente un sélecteur jQuery quelconque.

Je pense que vous avez compris la logique permettant de convertir une méthode événementielle traditionnelle quelconque en son équivalenton(): il suffit de spécifier le nom de l'événement dans le premier argument de la méthode, entre apostrophes, et de spécifier la fonction événementielle dans le deuxième argument.

Comme nous allons le voir, la méthodeon()a plusieurs avantages. Elle permet de :

  • Limiter l'écriture en associant une même méthode événementielle à plusieurs éléments ;

  • Relier plusieurs méthodes événementielles à un élément en une seule instruction ;

  • Désactiver une méthode événementielle précédemment attachée avec la méthodeon();

  • Relier plusieurs méthodes événementielles entre elles. Par la suite, vous pourrez toutes les déclencher, ou toutes les désactiver en une seule instruction jQuery.

Une méthode pour gérer plusieurs événements

Supposons que vous vouliez relier les méthodes événementiellesmouseenter()etmousemove()aux balises<img>. Traditionnellement, vous utiliserez les instructions suivantes :

$('img').mouseenter(function() { … }
$('img').mousemove(function() { … }

Si vous passez par la méthodeon(), une seule instruction suffira :

$('img').on('mouseenter mousemove', function() { … })

Comme vous le voyez, il suffit de passer les méthodes événementielles dans le premier argument de la méthodeon()en les mettant entre apostrophes et en les séparant par une espace.

Plusieurs méthodes en une seule instruction

Imaginons maintenant que vous vouliez associer les fonctionstraitement1ettraitement2aux événementsmouseenteretmousemovedes balises<img>de classegrand. Vous utiliserez les instructions suivantes :

$('img.grand').mouseenter(traitement1);
$('img.grand').mousemove(traitement2);

En utilisant la méthodeon(), une seule ligne suffit pour associer les deux traitements aux deux événements des images de classegrand:

$('img.grand').on({mouseenter:traitement1, mousemove:traitement2});

Ce cas particulier se généralise : pour associer plusieurs événements et plusieurs fonctions de traitement aux éléments sélectionnés par un sélecteur jQuery, spécifiez les différents événements en paramètres de la méthodeon()en respectant les règles suivantes :

  • Chaque événement doit être suivi du caractère « : » et de la fonction de traitement associée ;

  • Les événements sont séparés par une virgule ;

  • Les événements sont mis entre accolades.

Désactiver une méthode de gestion événementielle

Si la méthodeon()attache un événement à un élément, d'après vous, quelle méthode détache ce même événement ? Comme on pouvait s'y attendre, il s'agit de la méthodeoff().

Nous allons autoriser puis interdire l'événementclicksur une image en utilisant les méthodeson()etoff().

Cliquez sur l'image après avoir activé le clic<br />
<img src="canard.jpg" id='image'><br />
<button id="activer">Activer le clic</button>
<button id="desactiver">Désactiver le clic</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    function traitement() {
      alert('Image cliquée');
    }  
    $('#activer').on('click', function() {
      $('#image').click(traitement);
    });
    $('#desactiver').on('click', function() {
      $('#image').off('click', traitement);
    });
});
</script>

La fonctiontraitement()affiche une boîte de dialogue avec la fonction JavaScriptalert(). Cette fonction sera invoquée lorsque l'utilisateur cliquera sur l'image, à condition que la méthode de gestion événementielleclick()ait été attachée à l'image.

$(function() {
  function traitement() {
  alert('Image cliquée');
}

Lorsque l'utilisateur clique sur le bouton d'identifiant#activer, la méthode de gestion événementielleclick()est attachée à l'image d'identifiant#image. À chaque clic sur l'image, la fonctiontraitement()sera exécutée :

$('#image').click(traitement);

Lorsque l'utilisateur clique sur le bouton d'identifiant#desactiver, la méthode de gestion événementielleclick()est détachée de l'image d'identifiant#image:

$('#image').off('click', traitement);

Étiqueter plusieurs méthodes événementielles

Vous avez appris à attacher une méthode événementielle à un sélecteur en utilisant la méthodeon(). Ainsi par exemple, pour attacher une méthode événementielle correspondant à l'événement « début de survol » aux balises<img>, vous utilisez cette instruction :

$('img').on('mouseenter', function() {...});

Pour supprimer cette méthode événementielle, vous utilisez cette instruction :

$('img').off('mouseenter');

Tout ceci fonctionne parfaitement tant que vous utilisez la bibliothèque jQuery sans aucun plugin. Par contre, si un ou plusieurs plugins sont utilisés (un chapitre y est consacré), il se peut qu'ils définissent leurs propres méthodes événementielles et qu'ils les attachent aux mêmes sélecteurs que vous. Si vous utilisez la méthodeoff()en précisant un nom d'événement, comme dans l'instruction précédente, toutes les méthodes événementielles correspondant à cet événement seront supprimées : les vôtres, mais aussi celles qui sont peut-être définies dans les plugins que vous utilisez. Du coup, ces plugins risquent de ne plus fonctionner !

Première parade

Dans la sous-section « Désactiver une méthode de gestion événementielle », vous avez vu qu'il était possible de créer une fonction de traitement en JavaScript, et d'indiquer son nom lorsque vous définissez une méthode événementielle à un sélecteur. Par exemple, pour attacher une méthode événementielle correspondant à l'événement « début de survol » aux balises<img>en confiant le traitement à la fonctionactions(), vous utilisez l'une de ces instructions :

$('img').mouseenter(actions);
$('img').on('mouseenter', actions);

Bien entendu, vous devrez définir la fonctionactions()pour indiquer quel traitement doit être effectué :

function actions() {
  // Insérer les instructions de traitement appropriées
}

Par la suite, vous pourrez supprimer cette méthode événementielle sans toucher aux éventuelles autres qui auraient pu être associées à l'événementmouseenter. Pour cela, vous utiliserez cette instruction :

$('img').off('mouseenter', actions);
Deuxième parade

Vous pouvez affecter un « espace de noms » (namespace en anglais) à vos méthodes événementielles. Ne soyez pas effrayés par ce nom. En jQuery, un espace de noms peut être comparé à une classe CSS. Son but est de donner une étiquette à une ou plusieurs méthodes événementielles afin de faciliter leur manipulation. Une fois vos méthodes événementielles ainsi étiquetées, vous pourrez facilement les supprimer sans que cela nuise aux méthodes événementielles qui auraient pu être définies dans les plugins que vous utilisez.

Commencez par choisir un espace de noms. Supposons que vous utilisiez jQuery pour mettre au point un site en rapport avec le dépannage informatique, vous pourriez utiliser l'espace de noms « depanPC » pour toutes les méthodes événementielles que vous définirez. Cet espace de noms sera alors systématiquement ajouté chaque fois que vous faites appel à la méthodeon(). Par exemple :

$('img').on('mouseenter.depanPC', function() { //traitement });
$('img').on('mouseleave.depanPC', function() { //traitement });
$('img').on('mousemove.depanPC', function() { //traitement });

Comme vous le voyez, il suffit d'ajouter un point suivi de l'espace de noms à chaque événement. Lorsque vous voudrez supprimer la méthode événementiellemouseleave()que vous avez mise en place, vous utiliserez l'instruction suivante :

$('img').off('mouseleave.depanPC');

Cette instruction ne supprimera pas les éventuelles autres méthodes événementielles qui auraient pu être définies dans les plugins que vous utilisez. Vous pouvez supprimer plusieurs méthodes événementielles liées à un espace de noms en une seule instruction. Supposons que vous désiriez supprimer les méthodes événementiellesmouseenter()etmouseleave()liées à l'espace de noms « depanPC ». Vous utiliserez l'instruction suivante :

$('img').off('mouseenter.depanPC mouseleave.depanPC');

Supposons maintenant que vous désiriez supprimer toutes les méthodes événementielles rattachées à l'espace de noms « depanPC ». Pour cela, vous utiliserez l'instruction suivante :

$('img').off('.depanPC');

Enfin, vous pouvez supprimer les méthodes événementielles liées à plusieurs espaces de noms en une seule instruction. Par exemple, pour supprimer des espaces de noms « depanPC » et « depanMAC » de toutes les méthodes événementielles liées à l'événementclicket appliquées aux balises<img>, vous utiliserez l'instruction suivante :

$('img').off('click.depanPC.depanMAC');

Ou encore, pour supprimer des espaces de noms « depanPC » et « depanMAC » de toutes les méthodes événementielles appliquées aux balises<a>, vous utiliserez l'instruction suivante :

$('a').off('.depanPC.depanMAC');

Pour l'instant, vous ne voyez peut-être pas très bien à quoi les espaces de noms vont vous servir, mais rassurez-vous, tout deviendra limpide lorsque vous définirez vos propres plugins jQuery.

Gestion événementielle unique

Il est parfois nécessaire de réagir à un événement la première fois qu'il se produit, puis de l'ignorer par la suite. jQuery possède une méthode pour cela :one(). Voyons comment mettre en œuvre cette méthode avec quelques lignes de code. Dans cet exemple, l'utilisateur pourra cliquer sur une image. Le premier clic sera pris en compte, les autres seront ignorés.

Cliquez sur l'image<br />
<img src="bon.gif"><br />
<span id='message'></span>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').one('click', function() {
      $('#message').text('Vous avez cliqué sur l\'image. Désormais, je resterai insensible aux clics.').fadeIn(1000).fadeOut(5000);
    });
  });
</script>

Le corps du document contient un texte, une image et une balise<span>dans laquelle sera affiché un message suite au premier clic sur l'image. Le code jQuery met en place une méthode événementielle à usage unique sur l'événementclickde la balise<img>:

$('img').one('click', function() {

Lorsque l'image est cliquée pour la première fois, un texte est affiché dans la balise<span>à l'aide de la méthodetext(). Cette méthode est chaînée avec les méthodesfadeIn()etfadeOut()pour provoquer une apparition du message en une seconde (fadeIn(1000)) et une disparition du message en cinq secondes (fadeOut(5000)).

Déclenchement d'événements

Généralement, les événements sont déclenchés par l'utilisateur, lorsqu'il clique sur un objet, utilise la roulette de la souris ou appuie sur une touche du clavier par exemple. Dans certains cas, il peut être nécessaire de déclencher un événement sans le concours de l'utilisateur, en utilisant une instruction jQuery. Pour cela, vous ferez appel à la méthodetrigger(), dont voici la syntaxe :

$(sel).trigger('ev');

… oùselest un sélecteur jQuery quelconque etevest l'événement à déclencher.

Voyons comment utiliser la méthodetrigger()en pratique. Cet exemple demande à l'utilisateur de cliquer sur une image. Un message est alors affiché dans une balise<span>. L'utilisateur peut également cliquer sur un bouton. Dans ce cas, c'est la procédure événementielle liée au clic sur le bouton qui déclenche l'affichage du message.

Cliquez sur l'image<br />
<img src="bon.gif"><br />
<span id='message'></span><br />
<button>Cliquez ici</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').click(function() {
      $('#message').text('L\'image a été cliquée.').fadeIn(1000).fadeOut(1000);
    });
    $('button').click(function() {
      $('img').trigger('click');
    });  
  });
  </script>

L'instruction suivante définit une méthode événementielle liée au clic sur le bouton :

$('button').click(function() {

Le traitement consiste à simuler le clic sur l'image :

$('img').trigger('click');

Le message « L'image a été cliquée » est donc affiché lorsque vous cliquez sur l'image ou sur le bouton.

Il pourrait être intéressant d'afficher un message si l'image est cliquée et un autre message si le bouton est cliqué. Voici le code utilisé :

Cliquez sur l'image<br />
<img src="bon.gif"><br />
<span id='message'></span><br />
<button>Cliquez ici</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('img').click(function(event,texte) {
      if (texte == undefined)
        texte = "par vous";
      $('#message').text('L\'image a été cliquée ' + texte).fadeIn(1000).fadeOut(1000);
    });
    $('button').click(function() {
      $('img').trigger('click', 'par jQuery');
    });
  });
</script>

Comme vous pouvez le constater, seul le code jQuery a été modifié. Maintenant, la fonction a deux paramètres :

$('img').click(function(event,texte) {

Le paramètreeventsera remplacé par le nom de l'événement lorsqu'il se produira. Ici,eventvaudra doncclicklorsque l'image sera cliquée. Par contre,texteest un paramètre supplémentaire qui pourra être pris en compte lors du traitement de la méthode événementielle. Lorsque l'utilisateur clique sur l'image, aucun paramètretexten'est passé à la méthode de gestion événementielle. Le paramètretextevaut doncundefined(non défini). Dans ce cas, la valeur « par vous » doit lui être affectée pour que le message « L'image a été cliquée par vous » s'affiche dans la balise<span>:

if (texte == undefined)
  texte = "par vous";

Le message affiché a une partie fixe (« L'image a été cliquée ») et une partie variable (texte) qui dépend de l'élément cliqué par l'utilisateur. La méthode événementielle liée au clic sur le bouton simule toujours un clic sur l'image, mais cette fois-ci le texte « par jQuery » est passé à la méthode$('img').click()pour modifier le texte affiché dans la balise<span>.

$('button').click(function() {
  $('img').trigger('click', 'par jQuery');
});

Il est parfois nécessaire de passer plusieurs arguments à la méthodetrigger(). Dans ce cas, mettez-les entre crochets, comme ceci :

$(sel).trigger('ev', ['param1', 'param2', 'param3', 'etc.']);

… où :

  • selest un sélecteur jQuery quelconque ;

  • evest l'événement à simuler ;

  • param1,param2,param3et les suivants s'ils existent sont les paramètres à passer à la méthode événementielle déclenchée par la méthodetrigger().

Créer des événements personnalisés

Arrivés à ce point dans la lecture de ce cours, vous savez créer des méthodes événementielles en utilisant la méthodeon(). Par exemple, les instructions suivantes mettent en place une méthode événementielle qui affiche une boîte de dialogue lorsque l'utilisateur clique sur un élément d'identifiant#calcul:

$('#calcul').on("click", function() {
  alert("Vous avez cliqué sur l'élément d'identifiant #calcul");
});

La méthodeon()peut également être utilisée pour définir des méthodes événementielles personnalisées. Ici par exemple, nous définissons l'événement personnalisébonjour_jqueryet nous l'associons à un élément d'identifiant#bonjour:

$('#bonjour').on('bonjour_jquery', function() {
  alert('jQuery vous dit bonjour !');
});

Pour déclencher l'événement personnalisébonjour_jquerylors du clic sur un élément d'identifiant#bonjour, vous utiliserez la méthodetrigger():

$('#bonjour').trigger('bonjour_jquery');

Voici un exemple de code complet :

<button id="bonjour">Cliquez ici</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#bonjour').on('bonjour_jquery', function() {
      alert('jQuery vous dit bonjour !');
    });
    $('#bonjour').click(function() {
      $('#bonjour').trigger('bonjour_jquery');
    });  
  });
</script>

Le corps du document contient un bouton d'identifiant#bonjour. Le code jQuery définit l'événement personnalisébonjour_jqueryet lui fait afficher une boîte de message :

$('#bonjour').on('bonjour_jquery', function() {
  alert('jQuery vous dit bonjour !');
});

Les instructions suivantes définissent une méthode événementielle pour le clic sur le bouton d'identifiant#bonjour:

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

Cette méthode déclenche l'événementbonjour_jquery, et donc affiche la boîte de message définie dans cette méthode :

$('#bonjour').trigger('bonjour_jquery');

Est-il possible de passer des paramètres à une procédure événementielle personnalisée ?

Cela est tout à fait possible. Voici le code à utiliser :

<button id="bonjour">Cliquez ici</button>

<script src="jquery.js"></script>
<script>
  $(function() {
    $('#bonjour').on('bonjour_jquery', function(event, param) {
      alert(param + ', jQuery vous dit bonjour !');
    });
    $('#bonjour').click(function() {
      $('#bonjour').trigger('bonjour_jquery', 'Michel');
    });  
  });
</script>

Comme vous pouvez le voir, deux paramètres sont passés à la fonction de retour :

$('#bonjour').on('bonjour_jquery', function(event, param) {

Utilisez le paramètre transmis comme bon vous semble. Ici par exemple, il est intégré dans le texte affiché par la boîte de message :

alert(param + ', jQuery vous dit bonjour !');

Lors du déclenchement de l'événement personnalisébonjour_jquery, il suffit de passer une valeur dans le deuxième paramètre de la méthodetrigger():

$('#bonjour').trigger('bonjour_jquery', 'Michel');

Le résultat se trouve à la figure suivante.

Les événements personnalisés peuvent être facilement paramétrés
Les événements personnalisés peuvent être facilement paramétrés

Délégation d'événements

jQuery est fréquemment utilisé pour ajouter des éléments dans une page Web. Plutôt que d'attacher un gestionnaire d'événements à chacun des éléments insérés, vous pouvez définir un écouteur d'événements sur le parent. Pour cela, vous devez utiliser la méthodeon()en lui transmettant trois arguments :

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

… où :

  • delest l'élément sur lequel les enfants seront écoutés ;

  • evest le nom de l'événement concerné ;

  • selest un sélecteur qui indique le type des enfants écoutés ;

  • function()est la fonction à exécuter lorsque l'événementevest détecté.

Lorsque l'événementevse produit sur un enfant selde l'élément $('#del'), la fonction est exécutée.

sel 

Voyons comment fonctionne cette méthode en pratique. Dans l'exemple suivant, nous allons définir une balise<div>, modifier ses caractéristiques à l'aide de quelques instructions CSS et affecter une gestion événementielle à ses enfants <div>sur l'événementclick. Lorsque cet événement surviendra, une balise de même type sera créée à la suite de la balise cliquée, et donc, la gestion événementielle de la balise cliquée lui sera affectée puisqu'elle se situe au même niveau.

À la figure suivante, un clic sur l'élément d'origine crée un autre élément ayant la même allure et le même comportement événementiel (1). Un deuxième clic sur l'élément d'origine crée un deuxième élément ayant la même allure et le même comportement événementiel (2). Étant donné que le premier élément créé a le même comportement événementiel que celui dont il est issu, il est également possible de cliquer sur cet élément pour créer un clone événementiel (3).

Clonage du comportement de l'élément d'origine
Clonage du comportement de l'élément d'origine

Pour ceux qui frôlent la syncope, voici (enfin !) un peu de code :

<style>
  div { 
    background:yellow; 
    font-weight:bold; 
    cursor:pointer; 
    padding:8px; 
  }
</style>

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

<script src="jquery.js"></script>
<script>
  $('#master').on('click', 'div', function(){
    $(this).after('<div>Ce &lt;div&gt; a les mêmes caractéristiques que son parent</div>');
  });
</script>

Le corps du document contient deux balises<div>imbriquées. La balise conteneur (#master) est celle dont on désire reproduire le comportement des enfants <div> . Le code CSS met en forme les balises<div>du document : arrière-plan de couleur jaune, graisse des caractères initialisée àbold, pointeur de la souris transformé en une main et marges intérieures fixées à 8 pixels.

Examinons le code jQuery qui est à l'origine du clonage événementiel :

$('#master').on('click', 'div', function(){
  $(this).after('<div>Ce &lt;div&gt; a les mêmes caractéristiques que son parent</div>');
});

Lorsqu'un élément <div>enfant d'un élément d'identifiant#master($('#master')) est cliqué (on('click', 'div', …)), la fonction de retour est exécutée. Cette fonction insère une balise<div>et son contenu (<div>Ce <div> a les mêmes caractéristiques que son frère</div>) après l'élément qui vient d'être cliqué ($(this).after(…)). Vous pouvez indifféremment cliquer sur la balise<div>d'origine ou sur une des balises<div>insérées pour ajouter une nouvelle balise<div>après la dernière. La gestion événementielle a donc bien été clonée.

La figure suivante représente le résultat obtenu.

Un clic sur une balise <div> permet d'en créer une nouvelle
Un clic sur une balise <div> permet d'en créer une nouvelle

La délégation d'événements apporte un avantage indéniable : elle permet de réduire dans de larges proportions le nombre de gestionnaires d'événements définis dans le code. Imaginez que vous ayez plusieurs dizaines d'éléments insérés dans le conteneur pendant l'exécution du code jQuery. Sans la délégation d'événements, vous devriez définir un gestionnaire événementiel pour chacun d'entre eux !

Pour supprimer une délégation d'événements, vous utiliserez la méthodeoff():

$('#del').off('ev', 'sel');

… où :

  • delest l'élément à partir duquel le ou les gestionnaires d'événements ont été clonés ;

  • evest le nom de l'événement concerné ;

  • selest un sélecteur qui agit comme un filtre.

Nous allons ajouter un bouton de commande dans le code précédent pour supprimer la délégation d'événements.

<button id="suppr">Supprimer la délégation d'événements</button>
$('#master').on('click', 'div', function(){
  $(this).after('<div>Ce &lt;div&gt; a les mêmes caractéristiques que son parent</div>');
});
$('#suppr').on('click', function() {
  $('#master').off('click','div');
});

Le code jQuery capture l'événementclicksur le bouton d'identifiant#suppr:

$('#suppr').on('click', function() {

Lorsque cet événement se produit, la délégation d'événements est supprimée en faisant appel à la méthodeoff():

$('#master').off('click','div');
  • Certains événements peuvent être déclenchés par une instruction, en utilisant la méthodetrigger():blur,change,click,dblclick,error,focus,keydown,keypress,keyup,selectetsubmit. Par contre, les événements suivants ne sont pas déclenchables :load,mousedown,mouseout,mouseover,mousemove,mouseup,resizeetunload.

  • Il est possible de définir des événements personnalisés en jQuery, en utilisant la méthodeon(). L'événement ainsi créé peut être déclenché avec la méthodetrigger().

  • La délégation d'événements permet de cloner la gestion événementielle d'un élément à un ou plusieurs de ses enfants créés à la volée dans le code jQuery. Peu importe le nombre d'éléments créés : ils se comporteront tous (d'un point de vue événementiel) comme leur parent. Et ce, sans qu'aucun code supplémentaire ne soit écrit.

Exemple de certificat de réussite
Exemple de certificat de réussite