Ricerca nel sito web

3 modi per applicare i listener di eventi in JavaScript

Aggiungi interattività alle tue pagine web con gli eventi. Esiste più di un approccio possibile, quindi scopri i vantaggi di ciascuno.

La gestione degli eventi è un concetto importante in JavaScript. Gli eventi consentono alle pagine HTML di essere dinamiche e interattive, consentendoti di creare interfacce utente accattivanti. Puoi scrivere codice per eseguire JavaScript quando si verifica un evento sul DOM.

Un evento può verificarsi quando un utente fa clic su un elemento HTML, la pagina viene caricata o quando il valore di un campo di input cambia. Puoi scrivere codice che altera la struttura HTML quando si verifica un evento. Scopri tre diversi modi in cui puoi aggiungere ascoltatori di eventi al tuo codice.

1. Il metodo addEventListener

Il metodo addEventListener è uno dei metodi più diffusi del listener di eventi. Ha tre parametri:

  • Un oggetto che rappresenta l'evento.
  • Una funzione per gestirlo.
  • Un valore booleano opzionale, useCapture, che descrive come l'evento si propaga nel DOM.

L'evento può essere qualsiasi evento DOM specificato su un elemento di destinazione. Una funzione è impostata per rispondere a quell'evento quando si verifica.

La funzione può essere anonima o denominata. Gli obiettivi più diffusi includono un elemento, i relativi elementi secondari, un documento e una finestra che supporta un evento.

addEventListener() è un metodo consigliato per amministrare i listener di eventi in JavaScript. Funziona su qualsiasi destinazione di evento, non solo su elementi HTML, e supporta più gestori di eventi.

Potresti voler eseguire del codice sul DOM. È possibile stampare testo, eseguire calcoli o visualizzare un'immagine quando un utente fa clic sul pulsante.

Illustriamolo con il seguente codice:

<!DOCTYPE html>
<html>
    <body>
        <h1>The addEventListener Method With Functions</h1>
        <button id="myBtn">Click Here</button>
        <p id="demo"></p>
    </body>
</html>

Successivamente, aggiungi il listener di eventi utilizzando il pulsante.

const element = document.getElementById("myBtn");
element.addEventListener("click", myFunction1);
function myFunction1() {
    document.getElementById("demo").innerHTML += "Fuction executed! "
}

Quando si fa clic sul pulsante, sullo schermo viene stampato il testo "Funzione eseguita", come mostrato di seguito.

2. Delegare eventi a addEventListener

La delega di un evento in JavaScript è un modello utilizzato per gestire più eventi. Invece di aggiungere un ascoltatore di eventi a ciascun elemento, aggiungi solo il ascoltatore di eventi a un elemento antenato. Puoi accedere all'elemento che ha attivato l'evento tramite la proprietà .target dell'oggetto evento.

Ciò garantisce che tutti gli elementi target abbiano un comportamento condiviso. Senza di esso, dovresti aggiungere manualmente un ascoltatore di eventi a ciascuno.

Ecco un esempio di delega di eventi:

<!DOCTYPE html>
<html>
    <body>
        <h1> Event Delegation on Buttons</h1>
        <div>
            <button>Button 1</button>
            <button>Button 2</button>
            <button>Button 3</button>
        </div>
    </body>
</html>

Successivamente, aggiungi gli ascoltatori di eventi a tutti i pulsanti con solo poche righe di codice.

const div = document.querySelector('div')
div.addEventListener("click", (event) => {
    if (event.target.tagName === 'BUTTON') {
        console.log('Button clicked')
    }
});

La delega degli eventi è un modello basato sull'Event bubbling. Il bubbling degli eventi avviene quando un elemento riceve un evento e lo trasmette ai suoi elementi genitore e antenato nel DOM. È un concetto di propagazione di eventi che avviene per impostazione predefinita in JavaScript.

3. Utilizzando l'attributo onclick

Puoi utilizzare l'attributo onclick per eseguire JavaScript quando gli utenti fanno clic su un elemento. Come il metodo addEventListener, puoi utilizzare il metodo onclick per stampare testo, eseguire calcoli e modificare le caratteristiche degli elementi sul DOM.

Puoi aggiungere il listener di eventi onclick come gestore di eventi in linea all'elemento HTML. L'evento si verifica quando un utente fa clic sull'elemento. Cambia il colore del paragrafo seguente in modo dinamico con il metodo onclick:

<!DOCTYPE html>
<html>
    <body>
        <h1> Execute onClick Events</h1>
        <p id="demo" onclick="myFunction()">
           Click me to change my text color.
       </p>
    </body>
</html>

Nel file JavaScript, aggiungi il seguente codice:

function myFunction() {
   document.getElementById("demo").style.color = "red";
}

L'output apparirà come mostrato:

Perché conoscere gli ascoltatori di eventi?

In qualità di sviluppatore JavaScript, utilizzerai spesso i listener di eventi nei progetti. Puoi creare numerose funzionalità con i listener di eventi, inclusi il bubbling e l'acquisizione di eventi. Comprendere questi concetti ti renderà più semplice creare interfacce dinamiche sulle tue applicazioni.

Articoli correlati: