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 listener di eventi al tuo codice.
1. Il metodo addEventListener
Il metodo addEventListener è uno dei più diffusi metodi del listener di eventi. Ha tre parametri:
- Un oggetto che rappresenta l'evento.
- Una funzione per gestirlo.
- Un valore booleano facoltativo, useCapture, che descrive come l'evento si propaga attraverso il 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 una funzione denominata. Gli obiettivi popolari includono un elemento, i suoi figli, un documento e una finestra che supporta un evento.
addEventListener() è un metodo consigliato per amministrare i listener di eventi in JavaScript. Funziona su qualsiasi target 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.
Illustriamo con il seguente codice:
html>
<html>
<corpo>
<h1>Il metodo addEventListener con funzionih1>
<pulsanteid="mioBtn">Clicca quipulsante>
<Pid="demo">P>
corpo>
html>Successivamente, aggiungi il listener di eventi utilizzando il pulsante.
cost elemento = documento.getElementById("mioBtn");
element.addEventListener("clic", miaFunzione1);
funzionemiaFunzione1() {
documento.getElementById("demo").innerHTML += "Funzione eseguita! "
}
Quando si fa clic sul pulsante, sullo schermo viene stampato il testo "Funzione eseguita", come mostrato di seguito.
2. Delega di eventi a addEventListener
La delega di un evento in JavaScript è un modello utilizzato per gestire più eventi. Invece di aggiungere un listener di eventi a ciascun elemento, aggiungi solo il listener di eventi a un elemento antenato. È possibile accedere all'elemento che ha attivato l'evento tramite il file .bersaglio proprietà dell'oggetto evento.
Ciò garantisce che tutti gli elementi scelti come target abbiano un comportamento condiviso. Senza di esso, dovresti aggiungere manualmente un listener di eventi a ciascuno.
Ecco un esempio di delega dell'evento:
html>
<html>
<corpo>
<h1> Delega di eventi sui pulsantih1>
<div>
<pulsante>Pulsante 1pulsante>
<pulsante>Pulsante 2pulsante>
<pulsante>Pulsante 3pulsante>
div>
corpo>
html>
Successivamente, aggiungi gli ascoltatori di eventi a tutti i pulsanti con poche righe di codice.
cost div = documento.querySelector('div')div.addEventListener("clic", (evento) => {
Se (evento.target.tagName 'PULSANTE') {
consolare.tronco d'albero("Pulsante cliccato")
}
});
La delega degli eventi è un modello basato sul bubbling degli eventi. Il bubbling degli eventi si verifica quando un elemento riceve un evento e lo trasmette ai suoi elementi padre e predecessore nel DOM. È un propagazione degli eventi concetto che accade 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. Analogamente al metodo addEventListener, è possibile utilizzare il metodo onclick per stampare testo, eseguire calcoli e modificare le caratteristiche degli elementi su il DOM.
È possibile aggiungere il listener di eventi onclick come gestore di eventi inline all'elemento HTML. L'evento si verifica quando un utente fa clic sull'elemento. Cambia dinamicamente il colore del seguente paragrafo con il metodo onclick:
html>
<html>
<corpo>
<h1> Esegui eventi onClickh1>
<Pid="demo"al clic="miaFunzione()">
Cliccami per cambiare il colore del mio testo.
P>
corpo>
html>Nel file JavaScript, aggiungi il seguente codice:
funzionemiaFunzione() {
documento.getElementById("demo").style.color = "rosso";
}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. La comprensione di questi concetti renderà più semplice la creazione di interfacce dinamiche sulle applicazioni.
