equivalente jQuery del metodo addEventListener di JavaScript


Answers

A partire da jQuery 1.7, .on() è ora il metodo preferito per associare gli eventi, piuttosto che .bind() :

Da bind() :

A partire da jQuery 1.7, il metodo .on () è il metodo preferito per il collegamento di gestori di eventi a un documento. Per le versioni precedenti, il metodo .bind () viene utilizzato per allegare un gestore eventi direttamente agli elementi. I gestori sono collegati agli elementi attualmente selezionati nell'oggetto jQuery, quindi tali elementi devono esistere nel momento in cui si verifica la chiamata a .bind (). Per un binding di eventi più flessibile, consultare la discussione sulla delega degli eventi in .on () o .delegate ().

La pagina della documentazione si trova su on()

Question

Sto cercando di trovare l'equivalente jQuery di questa chiamata al metodo JavaScript:

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

Sono arrivato fino a:

$(document).click(select_element);

ma questo non raggiunge lo stesso risultato, come l'ultimo parametro del metodo JavaScript - un valore booleano che indica se il gestore di eventi deve essere eseguito nella fase di cattura o di bubbling (per mia comprensione da http://www.quirksmode.org/js/events_advanced.html ) - è escluso.

Come posso specificare quel parametro o comunque ottenere la stessa funzionalità usando jQuery?




Ecco un trattamento eccellente su Mozilla Development Network (MDN) di questo problema per JavaScript standard (se non si desidera fare affidamento su jQuery o capirlo meglio in generale):

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

Ecco una discussione del flusso di eventi da un collegamento nel trattamento di cui sopra:

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

Alcuni punti chiave sono:

  • Permette di aggiungere più di un singolo gestore per un evento
  • Ti dà il controllo più fine della fase quando l'ascoltatore viene attivato (catturando contro gorgogliamento)
  • Funziona su qualsiasi elemento DOM, non solo sugli elementi HTML
  • Il valore di "this" passato all'evento non è l'oggetto globale (finestra), ma l'elemento da cui viene generato l'elemento. Questo è molto conveniente.
  • Il codice per i browser IE legacy è semplice e incluso sotto il titolo "Legacy Internet Explorer e attachEvent"
  • È possibile includere parametri se si racchiude il gestore in una funzione anonima



Una cosa da notare è che i metodi evento jQuery non attivano / incassano il load sui tag embed che contengono SVG DOM che viene caricato come un documento separato nel tag embed . L'unico modo in cui ho trovato per intrappolare un evento di load su questi era utilizzare JavaScript non elaborato.

Questo non funzionerà (ho provato on / bind / load metodi):

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

Tuttavia, questo funziona:

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