Change language
Python.Engineering Wiki Ascoltatore Di Eventi Javascript

Ascoltatore Di Eventi Javascript

__main__ Python module | ast Python module | code Python module | COM PHP module | dis Python module | Ev PHP module | Event PHP module | exp | html Python module | http Python module | iat | io Python module | JavaScript | os Python module | PS PHP module | Python functions | re Python module | site Python module | SPL PHP module | StackOverflow | stat Python module | struct Python module | test Python module | time Python module | types Python module | UI PHP module
Michael Zippo Michael Zippo 04.11.2021

L`aggiunta di funzionalità interattive a un sito Web è dove JavaScript brilla. Mentre HTML e CSS vengono utilizzati rispettivamente per definire la struttura e gli stili di una pagina Web, puoi utilizzare JavaScript per rendere il tuo sito più dinamico.

In JavaScript, gli eventi vengono utilizzati per creare un sito interattivo. . In questa guida parleremo degli eventi JavaScript. Esploreremo dove è possibile utilizzare gli eventi, come definire un evento e come chiamare un evento. Eccoci!

Cos`è un evento JavaScript?

Gli eventi possono essere attivati dal browser o dall`utente e possono modificare lo stato della pagina web. Quando si fa clic su un pulsante in una pagina Web, viene creato un evento JavaScript. Quando fai clic su un menu a discesa in espansione, viene utilizzato un evento JavaScript.

Gli eventi JavaScript hanno una vasta gamma di usi, tra cui:

  • Verifica se un modulo è stato completato
  • Sposta un utente in un`altra pagina dopo aver compilato un modulo
  • Rendi interattivi i menu a discesa
  • Consenti a un utente di ingrandire e ridurre le immagini

Per lavorare con gli eventi in JavaScript, devi conoscere due concetti: gestori di eventi e listener di eventi.

Un gestore di eventi è una funzione che viene eseguita quando un evento viene attivato su una pagina web. I listener di eventi allegano una funzione di evento a un elemento HTML, quindi quando questa funzione viene eseguita, l`elemento web viene modificato.

I gestori di eventi possono essere definiti in tre modi: utilizzando un gestore di eventi inline, un event o un listener di eventi.

Gestitori di eventi online

Il modo più semplice per iniziare con gli eventi in JavaScript è utilizzare un gestore di eventi online. Ciò significa che definirai il tuo evento nel tuo file HTML.

Per questo esempio, supponiamo di essere la progettazione di un sito Web per una panetteria chiamata JJ Smith`s Bakery. Vogliamo che a un utente venga richiesto di inserire il testo " Risposta ricevuta ‚" durante l`invio di un modulo.

Considera il seguente codice:

Questo codice mostra una pagina web simile a questa:

YhBM86zXeUH6CVstZ3cqjSfPpNHrDi1FRgWXFZMeCKNiTylMsE3TAEvgnvBLnl1zf30hlI6DcqWpXeFiL8YiojTKYJQeJ7 ESoQz4KhfCYhqlT9JmsxZZXRVj0EKBL9jbEaCs4Oe

Finora, non molto -.. cosa che accade nostra pagina web contiene un pulsante che dovrebbe fare qualcosa quando il nostro pulsante viene premuto quando si clicca sul nostro pulsante, non succede nulla. Questo perché dobbiamo ancora scrivere il nostro gestore di eventi.

Nel file main.js, incolla il seguente codice:

Questo codice troverà l`elemento con l`id "inviato" e cambierà il suo contenuto in "Modulo inviato." "Questo codice verrà eseguito solo quando il nostro submitForm() è chiamata. Questo è programmato per accadere quando l`utente fa clic sul nostro pulsante.

Quando facciamo clic sul nostro pulsante, accade quanto segue:

Come puoi vedere, il nostro messaggio appare. Abbiamo utilizzato un gestore di eventi online per rendere interattiva la nostra pagina web. Ma i gestori di eventi inline non sono l`unico modo per utilizzare gli eventi in JavaScript. Vediamo come utilizzare la proprietà del gestore di eventi nel nostro codice.

Eventi con proprietà del gestore

In un gestore inline, devi specificare la funzione che vuoi eseguire nel tuo file HTML . Nel nostro codice HTML di prima, questa riga è dove abbiamo definito la funzione che volevamo chiamare quando è stato premuto il nostro pulsante:

Utilizzando le proprietà del gestore, possiamo rimuovere il comando dall`evento "onclick" del nostro codice. Questo ci permette di spostare tutto il JavaScript che rende la nostra pagina web interattiva nel proprio file. Per questo esempio, daremo al nostro pulsante l`ID "pulsante", in modo da poter identificare il nostro pulsante nel codice JavaScript. Rimuoviamo l`evento onclick e assegniamo un identificatore al nostro pulsante:

Per attivare il nostro evento quando viene premuto il pulsante, scriveremo un evento con una proprietà del gestore all`interno del nostro "main". js " . Ecco il codice che useremo:

Quando esegui questo codice e fare clic sul pulsante, viene restituito il seguente messaggio:

4o62 FifBmuVWJDrNanvSaMu6tbum7kfLhkIyJ75xZ3Xt CsRgZsCf8qnj13uN1VyaoDaapwFE4pG BMvjQUHsAa1jLlGtRVPbnmOLDmzr98tzw38e18YY8 Hcaym YGeDzjzFwo

il nostro pulsante funziona allo stesso come prima, ma il nostro codice è scritto in modo diverso. Invece di scrivere i nostri gestori di eventi in linea, li abbiamo spostati nel nostro file main.js. Questo ci aiuta a scrivere codice più gestibile perché non dobbiamo leggere tutto il nostro codice HTML per sapere dove vengono attivati i nostri eventi inline.

Event Listener

Gli eventi possono essere utilizzati per dichiarare un evento in JavaScript. controlla sempre quando lo stato di un elemento i viene modificato e, se tale elemento viene modificato, il codice nel listener verrà eseguito.

Ad esempio, quando fai clic su un pulsante collegato a un listener di eventi, l`ascoltatore "sente" che è stato attivato un evento del mouse. Quindi eseguirà il codice che hai associato a quel particolare listener di eventi.

Il nostro codice HTML per questo esempio è lo stesso di sopra, ma apporteremo una piccola modifica al nostro " mano. js " file:

In questo codice, noi usiamo addEventListener per creare un listener di eventi. Questo invece di associare la nostra funzione JavaScript submitForm() a un evento onclick come abbiamo fatto nei nostri due ultimi esempi.

Specifichiamo "click" per dire al nostro codice di ascoltare quando il nostro pulsante viene cliccato con il puntatore del mouse. Esistono altri tipi di eventi oltre all`evento click, come gli eventi della tastiera, ma in questo tutorial ci concentreremo sull`evento clic del mouse.

Eseguiamo nuovamente il codice e facciamo clic sul pulsante.

L`output è lo stesso che abbiamo visto nei nostri ultimi due esempi, ma questa volta utilizziamo un listener di eventi HTML. I listener di eventi sono il modo più nuovo per dichiarare eventi in JavaScript e sono forse il metodo più comunemente usato.

Conclusione

Gli eventi JavaScript ti consentono di rendere interattiva la tua pagina Web. Un evento può essere attivato quando si preme un pulsante, si invia un modulo o si passa il mouse sopra il testo.Ci sono tre modi per dichiarare un evento in JavaScript: inline, utilizzando un proprietà o utilizzando un listener.

Ora sei pronto per iniziare a creare eventi JavaScript come uno sviluppatore web professionista!