jQuery équivalent de la méthode addEventListener de JavaScript

191

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?

javascript jquery events event-handling dom-events Bungle
la source
3
La capture d'événements n'est pas prise en charge par jQuery, car la capture d'événements n'est pas prise en charge par IE, que jQuery prend en charge;) Recherchez-vous la compatibilité IE?
Crescent Fresh
Merci, Crescent Fresh - je pense que cela a du sens maintenant. J'ai besoin de la compatibilité IE donc je suppose que je dois oublier la phase de capture.
Bungle

Réponses:

143

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é.

Russ Cam
la source
6
On dirait que IE9 le prend enfin en charge. blogs.msdn.com/b/ie/archive/2010/03/26/…
certains
et pourquoi ils ne prennent pas en charge la capture d'événements? Quels sont les inconvénients de la capture d'événements?
Aakash
2
Pour être clair, vous dites que ce que veut l'OP n'est pas possible - que vous devez utiliser le bullage et ne pouvez pas utiliser la capture. Droite?
Noumenon
115

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/


la source
La réponse acceptée a été modifiée pour y remédier.
Utilisateur qui n'est pas un utilisateur le
52

La chose la plus proche serait la fonction de liaison:

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

$('#foo').bind('click', function() {
  alert('User clicked on "foo."');
});
Ben Rowe
la source
14

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);
tbjers
la source
1
il convient de noter que c'est la bonne manière si vous avez l'intention de ne pas écraser d'autres gestionnaires d'événements liés pour le ou les éléments.
r3wt
quel est le $img?
anatol
12

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


la source
3 

$( "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

antelove
la source
1

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
Xitalogie
la source