jQuery => Événements

Remarques

jQuery gère en interne les événements via la fonction addEventListener . Cela signifie qu'il est parfaitement légal d'avoir plusieurs fonctions liées au même événement pour le même élément DOM.

Attacher et détacher des gestionnaires d'événements

Joindre un gestionnaire d'événements

Depuis la version 1.7, jQuery possède l’événement API .on() . Ainsi, tout événement JavaScript ou événement standard standard peut être lié à l'élément jQuery actuellement sélectionné. Il existe des raccourcis tels que .click() , mais .on() vous donne plus d’options.

HTML

<button id="foo">bar</button>

jQuery

$( "#foo" ).on( "click", function() {
  console.log( $( this ).text() ); //bar
});

Détacher un gestionnaire d'événements

Naturellement, vous avez également la possibilité de détacher des événements de vos objets jQuery. Vous le faites en utilisant .off( events [, selector ] [, handler ] ) .

HTML

<button id="hello">hello</button>

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off();
});

Lorsque vous cliquez sur le bouton $(this) , vous vous référez à l'objet jQuery en cours et supprimez tous les gestionnaires d'événements attachés. Vous pouvez également spécifier quel gestionnaire d'événement doit être supprimé.

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off('click');
});

$('#hello').on('mouseenter', function(){
    console.log('you are about to click');
});

Dans ce cas, l'événement mouseenter fonctionnera toujours après un clic.

Événements délégués

Commençons par l'exemple. Voici un exemple très simple de HTML.

Exemple HTML

<html>
    <head>
    </head>
    <body>
        <ul>
            <li>
                <a href="some_url/">Link 1</a>
            </li>
            <li>
                <a href="some_url/">Link 2</a>
            </li>
            <li>
                <a href="some_url/">Link 3</a>
            </li>
        </ul>
    </body>
</html>

Le problème

Maintenant, dans cet exemple, nous voulons ajouter un écouteur d'événement à tous les éléments <a> . Le problème est que la liste dans cet exemple est dynamique. <li> éléments <li> sont ajoutés et supprimés au fil du temps. Cependant, la page ne s'actualise pas entre les modifications, ce qui nous permettrait d'utiliser des écouteurs d'événements de clic simples pour les objets de lien (par exemple, $('a').click() ).

Le problème est de savoir comment ajouter des événements aux éléments <a> qui vont et viennent.

Informations générales - Propagation des événements

Les événements délégués ne sont possibles que grâce à la propagation des événements (souvent appelée événementing). Chaque fois qu'un événement est déclenché, il se déploie complètement (à la racine du document). Ils délèguent la gestion d'un événement à un élément ancêtre non modifié, d'où le nom d'événements "délégués".

Ainsi, dans l'exemple ci-dessus, cliquer sur le lien <a> élément déclenche un événement "clic" dans ces éléments dans cet ordre:

une
li
ul
corps
html
racine du document

Solution

Connaissant ce que font les événements, nous pouvons attraper l’un des événements recherchés qui se propagent dans notre HTML.

L’élément <ul> est un bon endroit pour le capturer dans cet exemple, car cet élément n’est pas dynamique:

$('ul').on('click', 'a', function () {
  console.log(this.href); // jQuery binds the event function to the targeted DOM element
                          // this way `this` refers to the anchor and not to the list
  // Whatever you want to do when link is clicked
});

En haut:

Nous avons 'ul' qui est le destinataire de cet écouteur d'événement
Le premier paramètre ('click') définit les événements que nous essayons de détecter.
Le second paramètre ('a') est utilisé pour déclarer d'où doit provenir l'événement (de tous les éléments enfants sous le destinataire de cet écouteur d'événement, ul).
Enfin, le troisième paramètre est le code exécuté si les exigences des premier et second paramètres sont remplies.

En détail comment fonctionne la solution

L'utilisateur clique sur l'élément <a>
Cela déclenche un événement click sur l'élément <a> .
L'événement commence à bouillonner vers la racine du document.
L'événement entre en premier dans l'élément <li> , puis dans l'élément <ul> .
L'écouteur d'événement est exécuté en tant <ul> événement associé à l'élément <ul> .
L'écouteur d'événement détecte d'abord l'événement déclencheur. L'événement bouillonnant est "clic" et l'auditeur a un "clic", c'est une passe.
L'auditeur vérifie que le second paramètre («a») correspond à chaque élément de la chaîne de bulles. Comme le dernier élément de la chaîne est un "a", cela correspond au filtre et c'est aussi une passe.
Le code du troisième paramètre est exécuté en utilisant l'élément correspondant tel qu'il se this . Si la fonction n'inclut pas un appel à stopPropagation() , l'événement continuera à se propager vers la racine ( document ).

Remarque: Si un ancêtre approprié ne changeant pas n'est pas disponible / pratique, vous devez utiliser document . Comme habitude, n'utilisez pas le 'body' pour les raisons suivantes:

body a un bogue, en rapport avec le style, qui peut signifier que les événements de la souris ne bouillonnent pas. Cela dépend du navigateur et peut se produire lorsque la hauteur du corps calculée est 0 (par exemple, lorsque tous les éléments enfants ont des positions absolues). Les événements de souris bouillonnent toujours pour document .
document existe toujours pour votre script, vous pouvez donc attacher des gestionnaires délégués à document dehors d'un gestionnaire prêt pour DOM et assurez-vous qu'ils fonctionneront toujours.

Evénement de chargement de document .load ()

Si vous souhaitez que votre script attende le chargement d'une certaine ressource, telle qu'une image ou un PDF, vous pouvez utiliser .load() , raccourci pour le raccourci pour .on( "load", handler) .

HTML

<img src="image.jpeg" alt="image" id="image">

jQuery

$( "#image" ).load(function() {
  // run script
});

Evénements pour répéter des éléments sans utiliser d'identifiant

Problème

Il y a une série d'éléments répétés dans la page que vous devez savoir sur lesquels un événement s'est produit pour faire quelque chose avec cette instance spécifique.

Solution

Donne à tous les éléments communs une classe commune
Appliquer un écouteur d'événement à une classe. this gestionnaire d'événements interne est l'élément de sélecteur correspondant à l'événement sur lequel il s'est produit
Traverse de récipient le plus externe de répétition pour cette instance en commençant par this
Utilisez find() dans ce conteneur pour isoler d'autres éléments spécifiques à cette instance.

HTML

<div class="item-wrapper" data-item_id="346">
   <div class="item"><span class="person">Fred</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>
<div class="item-wrapper" data-item_id="393">
   <div clss="item"><span class="person">Wilma</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>

jQuery

$(function() {
  $('.delete').on('click', function() {
    // "this" is element event occured on
    var $btn = $(this);
    // traverse to wrapper container
    var $itemWrap = $btn.closest('.item-wrapper');
    // look within wrapper to get person for this button instance
    var person = $itemWrap.find('.person').text();
    // send delete to server and remove from page on success of ajax
    $.post('url/string', { id: $itemWrap.data('item_id')}).done(function(response) {
      $itemWrap.remove()
    }).fail(function() {
      alert('Ooops, not deleted at server');
    });
  });
});

originalEvent

Parfois, il y aura des propriétés qui ne sont pas disponibles dans l'événement jQuery. Pour accéder aux propriétés sous-jacentes, utilisez Event.originalEvent

Obtenir la direction du défilement

$(document).on("wheel",function(e){
    console.log(e.originalEvent.deltaY)
    // Returns a value between -100 and 100 depending on the direction you are scrolling
})

Activer et désactiver des événements spécifiques via jQuery. (Auditeurs nommés)

Parfois, vous souhaitez désactiver tous les écouteurs précédemment enregistrés.

//Adding a normal click handler
$(document).on("click",function(){
    console.log("Document Clicked 1")
});
//Adding another click handler
$(document).on("click",function(){
    console.log("Document Clicked 2")
});
//Removing all registered handlers.
$(document).off("click")

Un problème avec cette méthode est que TOUS les écouteurs liés au document par d'autres plugins, etc. seraient également supprimés.

Le plus souvent, nous voulons détacher tous les auditeurs attachés que par nous.

Pour ce faire, nous pouvons lier des auditeurs nommés comme,

//Add named event listener.
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 1")
});
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 2")
});

//Remove named event listener.
$(document).off("click.mymodule");

Cela garantit que tout autre écouteur de clic n'est pas modifié par inadvertance.

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

jQuery
Événements

Recherche…

Remarques

Attacher et détacher des gestionnaires d'événements

Joindre un gestionnaire d'événements

HTML

jQuery

Détacher un gestionnaire d'événements

HTML

jQuery

jQuery

Événements délégués

Exemple HTML

Le problème

Informations générales - Propagation des événements

Solution

En détail comment fonctionne la solution

Evénement de chargement de document .load ()

Evénements pour répéter des éléments sans utiliser d'identifiant

originalEvent

Obtenir la direction du défilement

Activer et désactiver des événements spécifiques via jQuery. (Auditeurs nommés)