1. jQuery
  2. Gestion des événements

Gestion des événements

La méthode on( events [, selector ] [, data ], handler ) permet d'attacher une fonction gestionnaire d'événements à un ou plusieurs événements qui se produiront sur l'élément qui l'appelle.

Les paramètres

  • events : chaîne de caractères : blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error...
  • selector : un sélecteur css qui cherchera à partir de l'élément du DOM appelant (optionnel)
  • data : données à passer en paramètre à la fonction quand un événement est déclenché (optionnel)
  • handler : fonction à exécuter quand l'événement est déclenché.

Exemple sans sélecteur ni données :

jQuery(function($){
  const form = $("<form></form>",{
    id: "form",
    class: "form"
  }).appendTo("body");

  const go = $("<button></button>",{
    text: "GO !",
    id: "go",
    class: "button"
  }).appendTo("form");

  //gestion des événements
  go.on("click",function(e){
    console.log("click sur bouton go");
    e.preventDefault();
  })
});

Exemple avec sélecteur et données :

jQuery(function($){
  for(let i=0; i< 10;i++) {
    $("<button></button>",{
      text: i,
      id: "button" + (i),
      class: "button"
    }).appendTo("body");
  }
  for(let i=0; i< 10;i++) {
    $("body").on("click","#button" + i, {value: "bouton" + i},function( event ){
      console.log(event.data.value);
    });
  }
});