jQuery équivalent de la méthode addEventListener de JavaScript

Question 1

J'essaie de trouver l'équivalent jQuery de cet appel de méthode JavaScript:

document.addEventListener('click', select_element, true);

Je suis allé jusqu'à:

$(document).click(select_element);

mais cela n'obtient pas le même résultat, que le dernier paramètre de la méthode JavaScript - un booléen qui indique si le gestionnaire d'événements doit être exécuté dans la phase de capture ou de bouillonnement (d'après ce que j'ai compris de http://www.quirksmode.org /js/events_advanced.html ) - est omis .

Comment spécifier ce paramètre ou obtenir la même fonctionnalité en utilisant jQuery?

Question 2

Tous les navigateurs ne prennent pas en charge la capture d'événements (par exemple, les versions d'Internet Explorer inférieures à 9 ne le font pas), mais tous prennent en charge le bullage d'événements, c'est pourquoi c'est la phase utilisée pour lier les gestionnaires aux événements dans toutes les abstractions inter-navigateurs, y compris jQuery.

Le plus proche de ce que vous recherchez dans jQuery utilise bind()(remplacé par on()dans jQuery 1.7+) ou les méthodes jQuery spécifiques à l'événement (dans ce cas click(), qui appelle bind()de toute façon en interne). Tous utilisent la phase bouillonnante d'un événement déclenché.

Question 3

Depuis jQuery 1.7, .on()est désormais la méthode préférée pour lier les événements, plutôt que .bind():

Depuis http://api.jquery.com/bind/ :

Depuis jQuery 1.7, la méthode .on () est la méthode préférée pour attacher des gestionnaires d'événements à un document. Pour les versions antérieures, la méthode .bind () est utilisée pour attacher un gestionnaire d'événements directement aux éléments. Les gestionnaires sont attachés aux éléments actuellement sélectionnés dans l'objet jQuery, donc ces éléments doivent exister au moment où l'appel à .bind () se produit. Pour une liaison d'événements plus flexible, consultez la discussion sur la délégation d'événements dans .on () ou .delegate ().

La page de documentation se trouve à l' adresse http://api.jquery.com/on/

Question 4

La chose la plus proche serait la fonction de liaison:

http://api.jquery.com/bind/

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});

Question 5

Une chose à noter est que les méthodes d'événement jQuery ne déclenchent pas / ne piègent pas loadsur les embedbalises qui contiennent SVG DOM qui se charge comme un document séparé dans la embedbalise. Le seul moyen que j'ai trouvé pour intercepter un loadévénement sur ceux-ci était d'utiliser du JavaScript brut.

Cela ne fonctionnera pas (j'ai essayé les méthodes on/ bind/ load):

$img.on('load', function () {
    console.log('FOO!');
});

Cependant, cela fonctionne:

$img[0].addEventListener('load', function () {
    console.log('FOO!');
}, false);

Question 6

Vous devez maintenant utiliser la .on()fonction pour lier des événements.

Question 7

$( "button" ).on( "click", function(event) {

    alert( $( this ).html() );
    console.log( event.target );

} );

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

<button>test 1</button>
<button>test 2</button>

Développer l'extrait

Question 8

Voici un excellent traitement sur le Mozilla Development Network (MDN) de ce problème pour le JavaScript standard (si vous ne souhaitez pas vous fier à jQuery ou mieux le comprendre en général):

https://developer.mozilla.org/en-US/docs/DOM/element.addEventListener

Voici une discussion du flux d'événements à partir d'un lien dans le traitement ci-dessus:

http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Certains points clés sont:

Il permet d'ajouter plus d'un seul gestionnaire pour un événement
Il vous donne un contrôle plus fin de la phase lorsque l'auditeur est activé (capture vs bouillonnement)
Cela fonctionne sur n'importe quel élément DOM, pas seulement sur les éléments HTML
La valeur de "this" passée à l'événement n'est pas l'objet global (fenêtre), mais l'élément à partir duquel l'élément est déclenché. C'est très pratique.
Le code pour les anciens navigateurs IE est simple et inclus sous l'en-tête "Legacy Internet Explorer et attachEvent"
Vous pouvez inclure des paramètres si vous placez le gestionnaire dans une fonction anonyme