Equivalente jQuery del metodo addEventListener di JavaScript

190

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

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

Sono arrivato a:

$(document).click(select_element);

ma ciò non ottiene lo stesso risultato, come l'ultimo parametro del metodo JavaScript, un valore booleano che indica se il gestore eventi deve essere eseguito nella fase di acquisizione o di bolle (per mia comprensione da http://www.quirksmode.org /js/events_advanced.html ) - viene lasciato fuori.

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

— pasticciare
fonte

3

L'acquisizione di eventi non è supportata da jQuery, poiché l'acquisizione di eventi non è supportata da IE, che jQuery supporta;) Stai cercando la compatibilità con IE?

— Crescent Fresh

Grazie, Crescent Fresh - Penso che abbia senso adesso. Ho bisogno della compatibilità con IE, quindi suppongo di dover dimenticare la fase di acquisizione.

— Bungle

142

Non tutti i browser supportano l'acquisizione di eventi (ad esempio, le versioni di Internet Explorer meno di 9 no) ma tutti supportano il bubbling di eventi, motivo per cui è la fase utilizzata per associare i gestori agli eventi in tutte le astrazioni cross-browser, incluso JQuery.

Il più vicino a quello che stai cercando in jQuery sta usando bind()(sostituito da on()jQuery 1.7+) o con i metodi jQuery specifici dell'evento (in questo caso click(), che chiama bind()comunque internamente). Tutti usano la fase gorgogliante di un evento generato.

— Russ Cam
fonte

6

Sembra che IE9 finalmente lo supporti. blogs.msdn.com/b/ie/archive/2010/03/26/…

— circa il

e perché non supportano la cattura di eventi? quali sono gli svantaggi della cattura di eventi?

— Aakash,

2

Giusto per essere chiari, stai dicendo che ciò che l'OP vuole non è possibile - che devi usare il bubbling e non puoi usare l'acquisizione. Destra?

— Noumenon,

115

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

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

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

La pagina della documentazione si trova all'indirizzo http://api.jquery.com/on/

La risposta accettata è stata modificata per risolvere questo problema.

— Utente che non è un utente l'

51

La cosa più vicina sarebbe la funzione bind:

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

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

— Ben Rowe
fonte

14

Una cosa da notare è che i metodi di evento jQuery non attivano / trap loadsui embedtag che contengono SVG DOM che viene caricato come documento separato nel embedtag. L'unico modo in cui ho scoperto di intercettare un loadevento su questi era usare JavaScript non elaborato.

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

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

Tuttavia, questo funziona:

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

— tbjers
fonte

1

va notato che questo è il modo corretto se si intende non sovrascrivere altri gestori di eventi associati per gli elementi.

— r3wt

che cos'è il $img?

— Anatol,

12

Ora dovresti usare la .on()funzione per associare eventi.

2

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

Espandi frammento

— antelove
fonte

1

Ecco un ottimo trattamento 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 link nel trattamento sopra:

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

Alcuni punti chiave sono:

Consente di aggiungere più di un singolo gestore per un evento
Ti dà un controllo più preciso della fase quando l'ascoltatore viene attivato (cattura contro bolle)
Funziona su qualsiasi elemento DOM, non solo su 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 l'intestazione "Legacy Internet Explorer e attachEvent"
È possibile includere parametri se si racchiude il gestore in una funzione anonima

— Xitalogy
fonte