Les méthodes d'événements

API : http://api.jquery.com/category/events/

L'association d'un gestionnaire à un événement peut aussi s'écrire de façon plus simple mais perd l'avantage d'écouter en permanence la page. Par exemple, si un bouton est créé à l'aide d'un script après que le DOM soit chargé, la méthode .click() ne fonctionnera pas.

$('.btn').on('click', function() {
    alert( $(this).text() );
});

Devient :

$('.btn').click(function() {
    alert( $(this).text() );
});

L'avantage de ces méthodes raccourcies et d'être moins gourmandes en mémoire puisque le DOM n'est pas écouté en permanance.

L'exemple suivant nous permet de montrer que la méthode .click()ne fonctionne pas sur le bouton créé après le chargement du DOM.

<div class="box">
  <p>
    <button class="btn btn-primary" id="add">Ajouter un bouton</button>
  </p>
  <p id="container" class="bg-muted">
    <button class="btn btn-default btn-sm">Bouton créer avant le chargement du DOM</button>
  </p>
</div>

$('#add').click(function() {
    var html = 'Bouton créer après le chargement du DOM';
    $("button.btn:last").parent().append(html);
});

$("#container .btn").click(function() {
    alert('Méthode .click()');
});

$("#container").on('click', '.btn', function() {
    alert('Méthode .on()');
});

See the Pen .click() vs .on() by Sutterlity (@sutterlity) on CodePen.

Voici quelques unes des méthodes les plus utilisées.

Les événements de la souris

Les événements du clavier

Les autres événements