Gestione degli eventi
Gestione degli eventi
Gestione degli eventi è una lezione jQuery Academy gratuita su CoddyKit. Questa è la lezione 1 di 1. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento jQuery Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso jQuery Academy include 1 lezioni in totale.
Introduzione
Salve,
Presentando jQuery, abbiamo detto che non offre solo la manipolazione del DOM, ma anche una funzionalità importante come la gestione degli eventi.
che cos'è un evento
Per prima cosa, impariamo che cos'è un evento.
Gli eventi vengono generati principalmente dall'utente nel browser web.
Possiamo definire molti eventi generati dall'utente, come il tocco dello schermo da parte degli utenti mobili, il movimento del mouse, il clic su un pulsante e lo scorrimento del mouse da parte degli utenti web.
Poiché JavaScript è un linguaggio di programmazione, gestiremo il flusso del programma in base agli eventi che si verificano.
Clic
metodo click()
Cominciamo dall'evento più semplice, l'evento di clic su un pulsante.
Il metodo click() viene utilizzato per gestire gli eventi di clic in HTML.
Possiamo ascoltare l'evento di clic con la sintassi seguente.
$(selector).click(handler);
- Con $(selector) scegliamo l'elemento da monitorare.
- handler rappresenta la funzione di callback che verrà eseguita in caso di clic.
Facciamo un esempio.
<button>Button</button>
<script>
/* Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
$('button').click(function(){
alert('Button clicked');
});
})
</script>Avvertenza
Il metodo click gestisce il clic sul pulsante tramite la funzione anonima che riceve come argomento.
Doppio clic
Eventi del mouse
Di seguito sono riportati alcuni eventi che l'utente può generare con il mouse.
Facciamo clic sul pulsante!
<button>Coddy Button</button>
<script>
// runs when button is click
$("button").click(function(){
$('button').text('Clicked')
});
// runs when button is double click
$("button").dblclick(function(){
$('button').text('Double Clicked')
});
</script>Eventi del mouse
Noti che alcuni eventi non possono essere testati nell'app mobile, poiché eventi come Hover non possono essere eseguiti sui dispositivi mobili!
<button>Coddy Button</button>
<script>
/* It runs when the mouse
hovers over the button
*/
$("button").hover(function(){
$('button').text('Hovering...')
});
/*
It runs when the mouse
enters an element
*/
$("button").mouseenter(function(){
$('button').text('Mouse enter...')
});
/*
It runs when the mouse leaves
an element
*/
$("button").mouseleave(function(){
$('button').text('Mouse Leave...')
});
</script>Eventi della tastiera
Eventi della tastiera
Ora impareremo a gestire gli eventi della tastiera.
Per prima cosa definiamo un input, quindi gestiamo gli eventi generati da questo input.
<input type="text" id="name"
name="yourname"
placeholder="Enter your name" />
<p>Keyboard event: <span id="state"></span></p>
<script>
/*
Callback will run as son as
the DOM is loaded
*/
$(document).ready(function(){
/*
It runs every time we press
the keyboard key on the keyboard.
*/
$('#name').keydown(function(){
$('#state').text('Key down')
});
/*
It runs when we take our finger
off the keyboard key
*/
$('#name').keyup(function(){
$('#state').text('Key up')
});
// Runs when the user focuses on input.
$('#name').focus(function(){
$('#state').text('Focus')
});
/*
It works when we unfocus
from an input on the keyboard.
*/
$('#name').blur(function(){
$('#state').text('Blur')
});
})
</script>Eventi dei moduli
Con jQuery possiamo anche gestire gli eventi che si verificano nei moduli.
Azioni come inserire dati in un input o effettuare una selezione dalla casella select sono tutti eventi dei moduli.
Esempio di eventi dei moduli
Nel codice seguente sono illustrati più eventi di un modulo.
*
listen to the form with the coddyForm
id and run when submit button clicked
*/
$("#coddyForm").submit(
function(event){
});eventi della finestra
Infine, vediamo gli eventi della finestra.
Forse l'evento della finestra più importante è $(document).ready(), ma poiché abbiamo già studiato questo evento, ne esamineremo altri.
metodo resize
metodo resize()
Il metodo resize si associa all'oggetto window del browser e viene attivato quando cambiano le dimensioni della finestra.
const window = {};
const $ = (obj) => ({
resize: (callback) => {
console.log("Resize event handler would be attached here.");
}
});
$(window).resize(function() {
//trigging when user change windows size
});metodo scroll
Metodo scroll()
Il metodo scroll() si associa a un elemento scorrevole o all'oggetto window e viene attivato quando l'utente fa scorrere il componente corrispondente.
$(window).scroll(function() {
//Calling when user scroll the window
});
$('#my-scrollable-element').scroll(function() {
//Calling when user scroll the cursor
//that inside the #my-scrollable-element element
});Congratulazioni
Congratulazioni 🎉
Abbiamo imparato la gestione degli eventi in jQuery.
Nella prossima sezione impareremo la lezione sulla creazione di animazioni con jQuery.
Domande Frequenti
La lezione «Gestione degli eventi» è gratuita?
Sì — il testo completo di «Gestione degli eventi» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso jQuery Academy, passa a CoddyKit PRO. Il corso jQuery Academy include 1 lezioni in totale.
Cosa imparerò in «Gestione degli eventi»?
Gestione degli eventi Eserciti jQuery Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare jQuery Academy?
Non è richiesta alcuna esperienza precedente. jQuery Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 1.
Quanto tempo richiede la lezione «Gestione degli eventi»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione jQuery Academy?
Sì. Ogni lezione jQuery Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.