web-dev-qa-db-fra.com

Équivalent jQuery de la méthode addEventListener de JavaScript

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

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

J'ai eu jusqu'à:

$(document).click(select_element);

mais cela n'aboutit pas au même résultat, en tant que dernier paramètre de la méthode JavaScript - un booléen indiquant si le gestionnaire d'événements doit être exécuté dans la phase de capture ou de bulle (d'après ce que je comprends de http: // www .quirksmode.org/js/events_advanced.html ) - est omis.

Comment spécifier ce paramètre ou obtenir les mêmes fonctionnalités avec jQuery?

javascriptjqueryeventsjavascript-eventsevent-handling
178
Bungle

Tous les navigateurs ne prennent pas en charge la capture d'événements (par exemple, les versions Internet Explorer inférieures à 9 ne le font pas), mais tous prennent en charge la diffusion d'événements. C'est pourquoi il s'agit de la phase utilisée pour lier les gestionnaires aux événements dans toutes les abstractions entre 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 quand même bind() en interne). Tous utilisent la phase de formation d'un événement en relief.

134
Russ Cam

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

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

Depuis jQuery 1.7, la méthode .on () est la méthode recommandé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 étant attachés aux éléments actuellement sélectionnés dans l'objet jQuery, ils doivent donc exister au moment où l'appel à .bind () se produit. Pour une liaison d'événement plus flexible, voir 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/

110
user315772

La chose la plus proche serait la fonction bind:

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

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

Il convient de noter que les méthodes d’événement jQuery ne déclenchent pas/ne capturent pas les balises load sur embed contenant le DOM SVG, qui sont chargées en tant que document distinct dans la balise embed. La seule façon pour moi de piéger un événement load consistait à utiliser du code 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);
14
tbjers

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

12
user370770

Voici un excellent traitement sur ce problème sur le réseau de développement Mozilla (MDN) pour JavaScript (si vous ne souhaitez pas utiliser jQuery ni le comprendre mieux en général):

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

Voici une discussion sur le 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 gestionnaire pour un événement.
  • Il vous donne un contrôle plus précis de la phase d'activation de l'auditeur (capture par rapport au bullage)
  • Cela fonctionne sur n'importe quel élément DOM, pas seulement sur les éléments HTML
  • La valeur de "this" transmise à 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 dans la rubrique "Legacy Internet Explorer et attachEvent"
  • Vous pouvez inclure des paramètres si vous incluez le gestionnaire dans une fonction anonyme.
1
Xitalogy