Imparare Java. Eventi del mouse Javascript

Continuiamo a imparare jQuery e ora iniziamo a studiare una sezione come la gestione degli eventi in jQuery.

Eventi del documento
Quando un utente interagisce con una pagina web, si verificano degli eventi. Gli eventi sono una sorta di notifica al sistema che l'utente ha eseguito un'azione o si è verificata una condizione all'interno del sistema stesso. Gli eventi vengono attivati ​​in seguito al clic su un elemento, allo spostamento del mouse, alla pressione di un tasto sulla tastiera, al ridimensionamento di una finestra, al completamento del caricamento di una pagina Web e così via. Sapendo quali eventi può generare un particolare elemento di una pagina web, puoi scrivere una funzione per gestire questo evento. Ad esempio, quando si inviano i dati del modulo, viene attivato l'evento onsubmit. Quando si verifica questo evento, è possibile convalidare i dati inseriti dall'utente e, se non corrispondono a quanto previsto, interrompere l'invio dei dati.

All'inizio del libro, abbiamo già considerato la possibilità di eseguire script subito dopo la formazione della struttura del documento, senza attendere il caricamento di altri elementi. Come già sai, puoi gestire questo evento usando il metodo ready().

alert("Il documento è disponibile per l'esecuzione dello script");
});

Se è necessario eseguire alcune azioni solo dopo che il documento HTML stesso è stato completamente caricato, così come tutti gli altri elementi (ad esempio le immagini), è possibile utilizzare il metodo load(). La sintassi del metodo è la seguente.

carico (funzione di richiamata)

funzione<Название функции>([oggetto evento]) (
// ...
}

Visualizzeremo un messaggio di conferma e il tipo di evento dopo che la pagina web sarà stata completamente caricata.

$(finestra).load(funzione(i) (
alert("Il documento è completamente caricato");
alert("Tipo di evento " + e.type);
});

Come risultato dell'esecuzione, riceveremo due messaggi.

Il documento è completamente caricato
tipo di evento di caricamento

Il metodo unload() ha lo scopo di eseguire qualsiasi azione immediatamente prima di scaricare il documento. Il metodo ha la seguente sintassi.
scarica (funzione di richiamata)

Il parametro della funzione Callback specifica un riferimento a una funzione del formato seguente.

funzione<Название функции>([<Объект event>]) {
// ...
}
Visualizza un messaggio prima di scaricare il documento.
$(finestra).unload(funzione()
( avviso("Entradi più!");
});

In questa sezione, esamineremo altri due metodi utili.

resize (funzione Callback) - Eseguita quando la finestra viene ridimensionata.

scroll (funzione Callback) - Eseguita quando si scorre il contenuto di un elemento di pagina, documento, finestra o cornice.

Il parametro della funzione Callback specifica un riferimento a una funzione del formato seguente.
funzione Nome funzione([Oggetto evento]) (
// ...
}

È possibile elaborare lo scorrimento del contenuto della finestra e visualizzare un messaggio come questo.
$(finestra).scroll(funzione() (
alert("Scorri il contenuto della finestra");
});

Come esempio dell'uso del metodo resize(), otteniamo la larghezza e l'altezza della finestra dopo che è stata ridimensionata (Listato 6.1).

Listato 6.1. Mostra la larghezza e l'altezza della finestra durante il ridimensionamento

Quando la finestra viene ridimensionata, l'elemento divl visualizzerà la larghezza e l'altezza della finestra.

Il metodo di errore (Funzione Callback) viene chiamato quando si verifica un errore nella pagina o nel codice JavaScript. Il parametro della funzione Callback specifica un riferimento a una funzione del formato seguente.

function Nome funzione([Messaggio[, URL[, Numero riga]]])(
// ...
}

Se l'errore si è verificato nell'oggetto finestra, nella funzione di callback saranno disponibili tre parametri:

Messaggio - testo che descrive l'errore;
URL - URL completo del documento con l'errore;
Numero di riga - numero di riga con un errore.

Per nascondere gli errori JavaScript agli utenti, restituisci true all'interno della funzione di callback.

$(finestra).error(funzione()(
restituisce vero;
});

Usando il metodo error(), puoi gestire un errore di caricamento dell'immagine.

$("img").error(funzione() (
$(questo).attr("src", "noimage.gif");
});

Nota
Affinché questo esempio funzioni correttamente, è necessario posizionare lo script sul server. In caso contrario, l'evento non verrà elaborato.

Eventi del mouse in jQuery

I seguenti metodi sono forniti per gestire gli eventi del mouse in jQuery.

Click([Funzione di richiamata]) - Eseguito quando si fa clic su un elemento o una pagina web. Se il parametro non è specificato, simulerà un clic sull'elemento. L'evento onclick è preceduto da due eventi: onmousedown e onmouseup. Visualizza un messaggio dopo aver fatto clic su qualsiasi pulsante.
$("ibutton").click(funzione() (
});

Toggle(): consente di alternare tra più funzioni quando si fa clic su un elemento o una pagina Web. Le funzioni vengono richiamate a turno. Il primo clic richiama la prima funzione, il secondo clic richiama la seconda e il terzo clic richiama la terza. Se la terza funzione non è definita, viene richiamata di nuovo la prima funzione e così via. Il metodo toggle() ha il seguente formato.
attiva/disattiva(<Функция обратного вызова 1>,
<Функция обратного вызова 2>[,
<Функция обратного вызова N>])

Facciamo cambiare il colore del testo del paragrafo dopo ogni clic del mouse.
$("p").commuta
(funzione() (
$(questo).css("colore", "rosso");
funzione() (
$(questo).css("colore", "blu");
funzione() (
$(questo).css("colore", "verde");
}
).click();

Prova a fare clic più volte sul paragrafo. Il colore del testo cambierà in sequenza da rosso a blu, da blu a verde, da verde a rosso di nuovo. Prestare attenzione all'ultima riga dell'esempio. Dopo che il gestore dell'evento è stato assegnato, l'evento onclick viene attivato con il metodo click() senza parametri. Per questo motivo, il colore del paragrafo sarà rosso fin dall'inizio.

Dblclick([Funzione Callback]) - Eseguito quando si fa doppio clic su un elemento o una pagina web. Se il parametro non è specificato, simulerà un doppio clic sull'elemento. L'evento ondblclick è preceduto da tre eventi: onmousedown, onmouseup e onclick. Visualizza un messaggio quando fai doppio clic su qualsiasi paragrafo.
$("p").dblclick(funzione() (
alert("Hai fatto doppio clic");
});

mousedown (funzione Callback) - eseguita quando si preme il pulsante del mouse su un elemento o una pagina. L'evento onmousedown si verifica prima degli eventi onmouseup e onclick.

mouseup (funzione Callback) - eseguita quando viene rilasciato il pulsante del mouse precedentemente premuto. L'evento onmouseup si verifica tra gli eventi onmousedown e onclick. Visualizza i messaggi quando fai clic e rilasci il pulsante del mouse su un paragrafo.

$("p").mousedown(function() (
$("#divl").append("Evento Onmousedown" + "
");
))mouseup(funzione() (
$("#divl").append("Evento Onmouseup" + "
");
});
<р>cliccami

Mousemove (Funzione Callback) - Viene eseguito ogni volta che si sposta il mouse. Visualizza un messaggio quando sposti il ​​cursore su un paragrafo.

$("p") .mousemove(function() (
$("#divl").append("Evento Onmousemove" + "
");
});

mouseover (funzione Callback) - eseguita quando il cursore del mouse si trova sull'elemento.

mouseout (funzione Callback) - eseguita quando il cursore del mouse lascia l'elemento. Passando il mouse sopra il collegamento, renderemo il colore del collegamento rosso e visualizzeremo un messaggio, e quando il cursore lascia il collegamento, cambieremo il suo colore in nero e visualizzeremo un messaggio.

$("a").mouseover(funzione() (
$(questo).css("colore", "rosso");
$("#divl").append("Eventoal passaggio del mouse" + "
");
))mouseout(funzione() (
$(questo).css("colore", "nero");
$("#divl").append("Eventosenza controllo" + "
");
}>;

hover(): consente di gestire il passaggio del mouse e il passaggio del mouse su un elemento con un unico metodo. Ha il seguente formato.
hover(Richiamata evento onmouseover, richiamata evento onmouseout)

Riscriviamo il nostro esempio precedente e utilizziamo il metodo hover().

$("a").hover(funzione() (
$(questo).css("colore", "rosso");
$("#divl").append("Evento sopra il mouse" + "
"); },
funzione() (
$(questo).css("colore", "nero");
$("#divl").append("Evento Onmouseout" + "
");
});

L'uso del metodo hover() ha un altro vantaggio. Se è presente un altro blocco all'interno del blocco, verranno chiamate funzioni separate quando si entra nel blocco interno e quando si esce da esso. Quando si utilizza il metodo hover(), questi movimenti verranno ignorati (Listato 6.2).

Listato 6.2. Caratteristiche dell'utilizzo del metodo al passaggio del mouse()

Separatogestori:

Linea 1

Linea 2

Funzionepassa il mouse():

Linea 1

Linea 2

Per il primo blocco nidificato, abbiamo definito gestori di eventi separati. Se spostiamo il cursore del mouse sull'intero blocco al centro, otteniamo la seguente sequenza di eventi.
evento sul passaggio del mouse
evento senza fine
evento sul passaggio del mouse
evento senza fine
evento sul passaggio del mouse
evento senza fine

Per il secondo blocco nidificato, i gestori di eventi vengono assegnati utilizzando il metodo hover(). Con la stessa azione, riceveremo solo due eventi.
evento sul passaggio del mouse
evento senza fine

In tutti i metodi in questa sezione, non abbiamo ancora capito il parametro che può essere passato a loro.

// ...
}

L'elemento che ha generato l'evento è accessibile all'interno della funzione tramite il puntatore this. Si noti che il puntatore this fa riferimento a un elemento nel Document Object Model, non a un elemento nella raccolta jQuery. Se nel parametro dell'oggetto evento è specificata una variabile, tramite essa è possibile accedere alle proprietà dell'oggetto evento. Scriviamo un gestore di clic del mouse per due elementi contemporaneamente. Quando si fa clic, visualizzare il nome del tag nell'elemento con l'id divl.

$("p, div").click(function(es) {
$("#divl")
.append("Elemento" + e.srcElement.tagName + "
");
});

Eventi della tastiera in jQuery

I seguenti metodi sono forniti per gestire gli eventi della tastiera in jQuery.

keydown (funzione di richiamata) - eseguita quando viene premuto un tasto della tastiera.

keyprcss (Funzione Callback) - Eseguita quando viene premuto un tasto della tastiera. Simile al metodo keydown(), ma restituisce il valore del codice del carattere in Unicode. L'evento si attiva continuamente finché l'utente non rilascia la chiave.

keyup (funzione Callback) - eseguita quando viene rilasciato il tasto della tastiera precedentemente premuto.

Il parametro della funzione di callback è un riferimento a una funzione del formato seguente.

funzione Nome funzione([Oggetto evento]) (
// ...
}

Se nel parametro dell'oggetto evento è specificata una variabile, tramite essa è possibile accedere alle proprietà dell'oggetto evento. Ad esempio, per ottenere il codice del tasto premuto, è possibile utilizzare la proprietà Codice del tasto. Ad esempio, otterremo il codice del tasto premuto e dimostreremo la sequenza degli eventi (Listato 6.3).

Listato 6.3. Eventi da tastiera

Evidenzia il campo di testo e premi un tasto qualsiasi sulla tastiera. Ad esempio, premiamo il tasto A con il layout della tastiera russa. Di conseguenza, otteniamo il seguente messaggio.
keydown 70
keyprcss 1072
tasto 7 0

Crea eventi in jQuery

I metodi seguenti sono progettati per gestire gli eventi del modulo.

focus([Callback]) - Eseguito quando l'elemento del modulo riceve lo stato attivo. Se il parametro non è specificato, l'elemento riceverà lo stato attivo per l'input.

blur([Callback]) - attivato quando l'elemento del modulo perde lo stato attivo. Se il parametro non è specificato, l'elemento perderà lo stato attivo per l'input.

modifica (funzione Callback) - eseguita quando i dati nel campo di testo cambiano e lo stato attivo si sposta su un altro elemento del modulo o quando i dati del modulo vengono inviati.

submit([Funzione di richiamata]) - Eseguito quando vengono inviati i dati del modulo. Se il parametro non è specificato, il modulo verrà inviato.

select([ funzione di callback ]) - eseguito quando viene selezionato il contenuto di un elemento. Se il parametro non è specificato, il contenuto dell'elemento sarà completamente selezionato.

Il parametro della funzione di callback è un riferimento a una funzione del formato seguente.

funzione Nome funzione([Oggetto evento]) (
// ...
}

L'elemento che ha generato l'evento è accessibile all'interno della funzione tramite il puntatore this. Si noti che il puntatore this fa riferimento a un elemento nel Document Object Model, non a un elemento nella raccolta jQuery. Se nel parametro dell'oggetto evento è specificata una variabile, tramite essa è possibile accedere alle proprietà dell'oggetto evento.

Dimostriamo la gestione di vari eventi di form (Listato 6.4).

Paragrafo 1
Paragrafo 2
Paragrafo 3
Paragrafo 4




!}

id="btn2">

!}