Médiaforma

jQuery – Délégation événementielle

Print Friendly

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 :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply