jQuery => eventi

Osservazioni

jQuery gestisce internamente eventi tramite la funzione addEventListener . Ciò significa che è perfettamente legale avere più di una funzione legata allo stesso evento per lo stesso elemento DOM.

Allega e scollega i gestori di eventi

Allegare un gestore di eventi

Dalla versione 1.7 jQuery ha l'API dell'evento .on() . In questo modo qualsiasi evento javascript standard o evento personalizzato può essere associato all'elemento jQuery attualmente selezionato. Ci sono scorciatoie come .click() , ma .on() ti offre più opzioni.

HTML

<button id="foo">bar</button>

jQuery

$( "#foo" ).on( "click", function() {
  console.log( $( this ).text() ); //bar
});

Stacca un gestore di eventi

Naturalmente hai anche la possibilità di staccare gli eventi dai tuoi oggetti jQuery. Lo fai usando .off( events [, selector ] [, handler ] ) .

HTML

<button id="hello">hello</button>

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off();
});

Quando si fa clic sul pulsante $(this) farà riferimento all'oggetto jQuery corrente e verranno rimossi tutti i gestori di eventi collegati da esso. È inoltre possibile specificare quale gestore di eventi deve essere rimosso.

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off('click');
});

$('#hello').on('mouseenter', function(){
    console.log('you are about to click');
});

In questo caso, l'evento mouseenter continuerà a funzionare dopo aver fatto clic.

Eventi delegati

Iniziamo con l'esempio. Ecco un esempio HTML molto semplice.

Esempio HTML

<html>
    <head>
    </head>
    <body>
        <ul>
            <li>
                <a href="some_url/">Link 1</a>
            </li>
            <li>
                <a href="some_url/">Link 2</a>
            </li>
            <li>
                <a href="some_url/">Link 3</a>
            </li>
        </ul>
    </body>
</html>

Il problema

Ora in questo esempio, vogliamo aggiungere un listener di eventi a tutti gli elementi <a> . Il problema è che la lista in questo esempio è dinamica. <li> elementi <li> vengono aggiunti e rimossi con il passare del tempo. Tuttavia, la pagina non si aggiorna tra le modifiche, il che ci consentirebbe di utilizzare semplici ascoltatori di eventi di clic sugli oggetti di collegamento (ad esempio $('a').click() ).

Il problema che abbiamo è come aggiungere eventi agli elementi <a> che vanno e vengono.

Informazioni di base - Propagazione di eventi

Gli eventi delegati sono possibili solo a causa della propagazione degli eventi (spesso chiamata bubbling degli eventi). Ogni volta che viene attivato un evento, esso salterà in bolla fino alla radice del documento. Delegano la gestione di un evento a un elemento antenato non mutevole, da cui il nome di eventi "delegati".

Quindi, nell'esempio sopra, facendo clic su <a> collegamento elemento si attiverà l'evento "clic" in questi elementi in questo ordine:

un
Li
ul
corpo
html
radice del documento

Soluzione

Sapendo cosa fa l'evento bubbling, possiamo cogliere uno degli eventi ricercati che si stanno diffondendo attraverso il nostro HTML.

Un buon punto per catturarlo in questo esempio è l'elemento <ul> , dato che quell'elemento non è dinamico:

$('ul').on('click', 'a', function () {
  console.log(this.href); // jQuery binds the event function to the targeted DOM element
                          // this way `this` refers to the anchor and not to the list
  // Whatever you want to do when link is clicked
});

In sopra:

Abbiamo 'ul' che è il destinatario di questo listener di eventi
Il primo parametro ("clic") definisce quali eventi stiamo cercando di rilevare.
Il secondo parametro ('a') viene utilizzato per dichiarare da dove deve provenire l'evento (di tutti gli elementi figlio in questo destinatario del listener di eventi, ul).
Infine, il terzo parametro è il codice che viene eseguito se i requisiti del primo e del secondo parametro sono soddisfatti.

In dettaglio come funziona la soluzione

L'utente fa clic su <a> elemento
Ciò attiva l'evento click sull'elemento <a> .
L'evento inizia a ribollire verso la radice del documento.
L'evento inizia prima con l'elemento <li> e poi con l'elemento <ul> .
Il listener di eventi viene eseguito poiché l'elemento <ul> ha il listener di eventi collegato.
Il listener di eventi rileva innanzitutto l'evento di attivazione. L'evento di bubbling è "click" e l'ascoltatore ha "click", è un passaggio.
I controlli listener tentano di far corrispondere il secondo parametro ('a') a ciascun elemento della catena a bolle. Poiché l'ultimo elemento della catena è un 'a', questo corrisponde al filtro e anche questo è un passaggio.
Il codice nel terzo parametro viene eseguito utilizzando l'elemento corrispondente poiché è this . Se la funzione non include una chiamata a stopPropagation() , l'evento continuerà a propagarsi verso l'alto verso la radice ( document ).

Nota: se un antenato adatto non mutevole non è disponibile / conveniente, è necessario utilizzare un document . Come abitudine, non utilizzare 'body' per i seguenti motivi:

body ha un bug, che ha a che fare con lo styling, il che può significare che gli eventi del mouse non vi sono bolle. Questo dipende dal browser e può verificarsi quando l'altezza del corpo calcolata è 0 (ad esempio quando tutti gli elementi figlio hanno posizioni assolute). Gli eventi del mouse sono sempre in bolla per document .
document esiste sempre per il tuo script, quindi puoi collegare i gestori delegati per document al di fuori di un gestore DOM-ready e accertarti che funzionino ancora.

Caricamento del documento Event .load ()

Se vuoi che lo script attenda fino a quando non viene caricata una certa risorsa, come un'immagine o un PDF puoi usare .load() , che è una scorciatoia per collegamento per .on( "load", handler) .

HTML

<img src="image.jpeg" alt="image" id="image">

jQuery

$( "#image" ).load(function() {
  // run script
});

Eventi per la ripetizione di elementi senza utilizzare ID

Problema

C'è una serie di elementi ripetuti nella pagina che devi sapere su quale evento si è verificato per fare qualcosa con quell'istanza specifica.

Soluzione

Dare a tutti gli elementi comuni una classe comune
Applica listener di eventi a una classe. this gestore di eventi interno è l'elemento di selezione corrispondente in cui si è verificato l'evento
Attraversa il contenitore più ripetuto esterno per quell'istanza iniziando da this
Usa find() all'interno di quel contenitore per isolare altri elementi specifici di quell'istanza

HTML

<div class="item-wrapper" data-item_id="346">
   <div class="item"><span class="person">Fred</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>
<div class="item-wrapper" data-item_id="393">
   <div clss="item"><span class="person">Wilma</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>

jQuery

$(function() {
  $('.delete').on('click', function() {
    // "this" is element event occured on
    var $btn = $(this);
    // traverse to wrapper container
    var $itemWrap = $btn.closest('.item-wrapper');
    // look within wrapper to get person for this button instance
    var person = $itemWrap.find('.person').text();
    // send delete to server and remove from page on success of ajax
    $.post('url/string', { id: $itemWrap.data('item_id')}).done(function(response) {
      $itemWrap.remove()
    }).fail(function() {
      alert('Ooops, not deleted at server');
    });
  });
});

originalEvent

A volte ci saranno proprietà che non sono disponibili nell'evento jQuery. Per accedere alle proprietà sottostanti utilizzare Event.originalEvent

Ottieni la direzione di scorrimento

$(document).on("wheel",function(e){
    console.log(e.originalEvent.deltaY)
    // Returns a value between -100 and 100 depending on the direction you are scrolling
})

Attivazione e disattivazione di eventi specifici tramite jQuery. (Ascoltatori con nome)

A volte si desidera disattivare tutti gli ascoltatori registrati in precedenza.

//Adding a normal click handler
$(document).on("click",function(){
    console.log("Document Clicked 1")
});
//Adding another click handler
$(document).on("click",function(){
    console.log("Document Clicked 2")
});
//Removing all registered handlers.
$(document).off("click")

Un problema con questo metodo è che TUTTI i listener collegati su document da altri plugin ecc. Verrebbero anch'essi rimossi.

Più spesso che no, vogliamo staccare tutti gli ascoltatori da noi solo collegati.

Per raggiungere questo obiettivo, possiamo associare gli ascoltatori nominati come,

//Add named event listener.
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 1")
});
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 2")
});

//Remove named event listener.
$(document).off("click.mymodule");

Ciò garantisce che qualsiasi altro listener di clic non venga modificato inavvertitamente.

Modified text is an extract of the original Stack Overflow Documentation

Autorizzato sotto CC BY-SA 3.0

Non affiliato con Stack Overflow

jQuery
eventi

Ricerca…

Osservazioni

Allega e scollega i gestori di eventi

Allegare un gestore di eventi

HTML

jQuery

Stacca un gestore di eventi

HTML

jQuery

jQuery

Eventi delegati

Esempio HTML

Il problema

Informazioni di base - Propagazione di eventi

Soluzione

In dettaglio come funziona la soluzione

Caricamento del documento Event .load ()

Eventi per la ripetizione di elementi senza utilizzare ID

originalEvent

Ottieni la direzione di scorrimento

Attivazione e disattivazione di eventi specifici tramite jQuery. (Ascoltatori con nome)