Eventi jQuery

Nella maggior parte delle applicazioni web, l'utente fa qualche azione per eseguire un'operazione. Ad esempio, l'utente clicca sul pulsante di salvataggio per salvare i dati modificati in una pagina web. Qui, cliccando sul pulsante, l'utente esegue un'azione che fa scattare il click su evento e il click su l'event handler (funzione) fa salvare i dati.

Per gestire gli eventi DOM usando i metodi jQuery per prima cosa ottenere il riferimento dell'elemento o degli elementi DOM usando il selettore jQuery e invocare il metodo jQuery appropriato.

L'esempio seguente mostra come gestire un evento click del pulsante.

$('#btnsalva').click(function () {
   alert('Hai premuto il pulsante');
});

Usiamo prima di tutto il selettore id per ottenere un riferimento del pulsante Salva e poi chiamiamo il metodo click(). Abbiamo specificato la funzione event handler (gestore d'evento) come funzione di callback, che sarà chiamata ogni volta che l'evento di click del pulsante Salva viene attivato.

jQuery passa un oggetto evento ad ogni funzione di gestione eventi. L'oggetto evento include importanti proprietà e metodi per la coerenza del cross-browser, ad esempio target, pageX, pageY, relatedTarget, ecc.

Una particolarità è l'utilizzo di this che nell'event handler rappresenta un elemento DOM che ha sollevato un evento.

$(':button').click(function (eventObj) {
   alert(this.value + ' ' + this.type + ' cliccato');
});

Sopra hai potuto vedere l'evento jquery click che è uno strumento di base ma potente. Può essere usato per rendere interattive alcune parti di un sito web, cioè per attivare un'azione dopo che l'utente ha fatto clic su qualcosa, come un pulsante o un link. Capire come utilizzare efficacemente questo evento permette agli sviluppatori di costruire siti web con funzionalità potenti e un'ottima esperienza utente. Con una codifica minima, è possibile impostare interazioni che aggiungono valore, rendendo le cose più veloci e facili per gli utenti che visitano il sito. È anche possibile tracciare la frequenza con cui ogni elemento viene cliccato, in modo da poter analizzare quali sono i più performanti.

jQuery fornisce vari metodi per gli eventi di mouse hover, ad esempio mouseenter, mouseleave, mousemove, mouseover, mouseout e mouseup.

$('#mioDiv').mouseenter(function (data) {
           $(this).css('background-color','yellow');
       });

$('#mioDiv').mouseleave(function (data) {
           $(this).css('background-color','green');
       });

È possibile utilizzare il metodo hover() invece di gestire separatamente gli eventi mouseenter e mouseleave.

$('#mioDiv').hover(function () {
       $(this).css('background-color','yellow');        
   },
   function () {
       $(this).css('background-color','green');
   });

jQuery keydown() e keyup()

Il keydown() è un metodo integrato in jQuery che viene utilizzato per attivare l'evento keydown ogni volta che l'utente preme un tasto sulla tastiera.

$(selettore).keydown(funzione)

$(document).keydown(function(event) {
       alert('Hai premuto un tasto');
   });

Invece keyup() si riferisce all'evento keyup, quando l'utente rilascia il tasto della tastiera.