Eventi sono azioni o eventi che si verificano in un'applicazione web.
Vengono attivati dalle interazioni dell'utente, ad esempio facendo clic su un pulsante, passando il mouse su un elemento o premendo un tasto sulla tastiera.
Altri esempi di eventi includono il ridimensionamento di una finestra, lo scorrimento di un documento o il caricamento di una pagina.
Gli eventi possono essere utilizzati per rendere un'applicazione Web più interattiva e reattiva fornendo feedback all'utente e attivando azioni in base all'input dell'utente.
Per gestire gli eventi in JavaScript, possiamo utilizzare i listener di eventi.
I listener di eventi sono funzioni che vengono chiamate quando si verifica un evento specifico su un elemento di destinazione.
Possiamo aggiungere un ascoltatore di eventi a un elemento utilizzando il metodo `addEventListener()`.
Il primo argomento di `addEventListener()` è il nome dell'evento e il secondo argomento è la funzione del gestore eventi.
```javascript
pulsante const =document.querySelector('pulsante');
// Aggiunge un ascoltatore di eventi per l'evento "clic" sul pulsante
button.addEventListener('clic', () => {
console.log('È stato fatto clic sul pulsante!');
});
```
Nell'esempio sopra, stiamo aggiungendo un ascoltatore di eventi a un elemento pulsante per l'evento `click`.
Quando l'utente fa clic sul pulsante, viene eseguita la funzione del gestore eventi e sulla console viene registrato il messaggio "È stato fatto clic sul pulsante!".
Possiamo anche rimuovere i listener di eventi dagli elementi utilizzando il metodo `removeEventListener()`.
Il primo argomento di `removeEventListener()` è il nome dell'evento e il secondo argomento è la funzione del gestore eventi.
```javascript
button.removeEventListener('clic', () => {
console.log('È stato fatto clic sul pulsante!');
});
```
Nell'esempio sopra, stiamo rimuovendo il listener di eventi per l'evento `click` dall'elemento button.
Ciò significa che la funzione del gestore eventi non verrà più eseguita quando l'utente fa clic sul pulsante.
Quando si verifica un evento, un oggetto chiamato oggetto evento viene creato.
L'oggetto evento contiene informazioni sull'evento, come l'elemento di destinazione, il tipo di evento e la posizione del mouse.
Possiamo accedere all'oggetto evento in una funzione del gestore eventi utilizzando il parametro "event".
```javascript
button.addEventListener('clic', (evento) => {
console.log(evento);
});
```
Nell'esempio sopra, stiamo registrando l'oggetto evento sulla console.
Ciò ci consentirà di vedere le informazioni sull'evento clic, come l'elemento di destinazione, il tipo di evento e la posizione del mouse.
Eventi in bolla si riferisce al modo in cui gli eventi si propagano attraverso l'albero DOM.
Quando si verifica un evento, viene prima attivato sull'elemento di destinazione.
Se l'elemento di destinazione non dispone di un ascoltatore di eventi per l'evento, l'evento verrà trasmesso all'elemento genitore.
Questo continua finché l'evento non raggiunge la cima dell'albero DOM.
Acquisizione di eventi è l'opposto dell'event bubbling.
Quando l'acquisizione degli eventi è attivata, gli eventi vengono prima attivati nella parte superiore dell'albero DOM e poi si propagano verso il basso fino all'elemento di destinazione.
Possiamo attivare la cattura degli eventi impostando il terzo parametro del metodo `addEventListener()` su "true".
```javascript
button.addEventListener('click', (evento), true);
```
Nell'esempio sopra, stiamo attivando l'acquisizione di eventi per l'evento `click` sull'elemento button.
Ciò significa che l'evento `click` verrà prima attivato nella parte superiore dell'albero DOM e poi si propagherà all'elemento pulsante.
Gli eventi sono una parte fondamentale di JavaScript e vengono utilizzati per rendere le applicazioni web più interattive e reattive.
Comprendendo come funzionano gli eventi, possiamo creare applicazioni web più divertenti e facili da usare.
Programmazione © www.354353.com