Gestione degli eventi in JavaScript

Articles

Questo articolo spiega la gestione degli eventi in JavaScript.

YouTube Video

javascript-html-event.html

  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4  <meta charset="UTF-8">
  5  <title>JavaScript &amp; HTML</title>
  6  <style>
  7    * {
  8        box-sizing: border-box;
  9    }
 10
 11    body {
 12        margin: 0;
 13        padding: 1em;
 14        padding-bottom: 10em;
 15        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 16        background-color: #f7f9fc;
 17        color: #333;
 18        line-height: 1.6;
 19    }
 20
 21    .container {
 22        max-width: 800px;
 23        margin: 0 auto;
 24        padding: 1em;
 25        background-color: #ffffff;
 26        border: 1px solid #ccc;
 27        border-radius: 10px;
 28        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 29    }
 30
 31    .container-flex {
 32        display: flex;
 33        flex-wrap: wrap;
 34        gap: 2em;
 35        max-width: 1000px;
 36        margin: 0 auto;
 37        padding: 1em;
 38        background-color: #ffffff;
 39        border: 1px solid #ccc;
 40        border-radius: 10px;
 41        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
 42    }
 43
 44    .left-column, .right-column {
 45        flex: 1 1 200px;
 46        min-width: 200px;
 47    }
 48
 49    h1, h2 {
 50        font-size: 1.2rem;
 51        color: #007bff;
 52        margin-top: 0.5em;
 53        margin-bottom: 0.5em;
 54        border-left: 5px solid #007bff;
 55        padding-left: 0.6em;
 56        background-color: #e9f2ff;
 57    }
 58
 59    button {
 60        display: block;
 61        margin: 1em auto;
 62        padding: 0.75em 1.5em;
 63        font-size: 1rem;
 64        background-color: #007bff;
 65        color: white;
 66        border: none;
 67        border-radius: 6px;
 68        cursor: pointer;
 69        transition: background-color 0.3s ease;
 70    }
 71
 72    button:hover {
 73        background-color: #0056b3;
 74    }
 75
 76    #output {
 77        margin-top: 1em;
 78        background-color: #1e1e1e;
 79        color: #0f0;
 80        padding: 1em;
 81        border-radius: 8px;
 82        min-height: 200px;
 83        font-family: Consolas, monospace;
 84        font-size: 0.95rem;
 85        overflow-y: auto;
 86        white-space: pre-wrap;
 87    }
 88
 89    .highlight {
 90        outline: 3px solid #ffc107; /* yellow border */
 91        background-color: #fff8e1;  /* soft yellow background */
 92        transition: background-color 0.3s ease, outline 0.3s ease;
 93    }
 94
 95    .active {
 96        background-color: #28a745; /* green background */
 97        color: #fff;
 98        box-shadow: 0 0 10px rgba(40, 167, 69, 0.5);
 99        transition: background-color 0.3s ease, box-shadow 0.3s ease;
100    }
101  </style>
102</head>
103<body>
104    <div class="container-flex">
105        <div class="left-column">
106            <h2>HTML Sample</h2>
107            <div id="parentDiv">
108                <button id="myButton">Click me</button>
109            </div>
110        </div>
111
112        <div class="right-column">
113            <h2>Form Sample</h2>
114            <form id="myForm">
115                <input type="text" name="username">
116                <button type="submit">Submit</button>
117            </form>
118        </div>
119    </div>
120
121    <div class="container">
122        <h1>JavaScript Console</h1>
123        <button id="executeBtn">Execute</button>
124        <div id="output"></div>
125    </div>
126
127    <script>
128        // Override console.log to display messages in the #output element
129        (function () {
130            const originalLog = console.log;
131            console.log = function (...args) {
132                originalLog.apply(console, args);
133                const output = document.getElementById('output');
134                output.textContent += args.map(String).join(' ') + '\n';
135            };
136        })();
137
138        document.getElementById('executeBtn').addEventListener('click', () => {
139            // Prevent multiple loads
140            if (document.getElementById('externalScript')) return;
141
142            const script = document.createElement('script');
143            script.src = 'javascript-html-event.js';
144            script.id = 'externalScript';
145            //script.onload = () => console.log('javascript-html-event.js loaded and executed.');
146            //script.onerror = () => console.log('Failed to load javascript-html-event.js.');
147            document.body.appendChild(script);
148        });
149    </script>
150</body>
151</html>

Gestione degli eventi in JavaScript

La gestione degli eventi in JavaScript è un meccanismo per eseguire azioni specifiche in risposta alle operazioni dell'utente (come clic e input da tastiera) o alle azioni del browser. Configurando i listener degli eventi, puoi creare pagine web dinamiche e interattive.

Basi degli Eventi

Gli eventi si verificano in risposta alle operazioni dell'utente e alle azioni del browser. Quando si verifica un evento, viene eseguito il gestore dell'evento associato (funzione). Ad esempio, ci sono eventi come i seguenti:.

Click (click)
Input da Tastiera (keydown, keyup)
Spostamento del Mouse (mousemove, mouseover)
Invio del Modulo (submit)
Caricamento Completo della Pagina (DOMContentLoaded)
Scorrimento (scroll)

Aggiungere i Listener degli Eventi

I listener degli eventi vengono configurati utilizzando il metodo addEventListener(). Questo metodo chiama una funzione specifica quando si verifica l'evento specificato.

Sintassi di base di `addEventListener()`

1element.addEventListener(event, handler);

element è l'elemento HTML che monitora l'evento.
event è il nome dell'evento (ad esempio, click).
handler è la funzione che viene eseguita quando si verifica l'evento.

Oggetto Evento

Quando si verifica un evento, JavaScript passa un oggetto evento contenente i dettagli dell'evento al gestore degli eventi. Questo oggetto include informazioni come quale elemento ha attivato l'evento e quale tasto è stato premuto.

Esempio: Utilizzo dell'oggetto evento

1<button id="myButton">Click me</button>

1const button = document.getElementById('myButton');
2
3button.addEventListener('click', (event) => {
4    console.log(event);  // Display event details in the console
5    console.log('Clicked element:', event.target);  // Display the clicked element
6});

Questo codice utilizza l'oggetto evento per mostrare informazioni dettagliate e l'elemento cliccato nella console quando si preme il pulsante.

Eventi tipici

Evento click

L'evento click si verifica quando l'utente fa clic su un elemento.

1element.addEventListener('click', () => {
2    console.log('Clicked');
3});

Questo codice visualizza un messaggio nella console quando l'elemento viene cliccato.

Eventi della tastiera

Gli eventi keydown e keyup si verificano quando l'utente preme o rilascia un tasto. È possibile utilizzare event.key per vedere quale tasto è stato premuto.

1document.addEventListener('keydown', (event) => {
2    console.log(`Key pressed: ${event.key}`);
3});

Questo codice mostra il nome del tasto nella console quando l'utente preme un tasto.

Eventi del mouse

Gli eventi mousemove e mouseover si verificano durante il movimento del mouse e il passaggio del puntatore.

1document.addEventListener('mousemove', (event) => {
2    console.log(`Mouse position: X=${event.clientX}, Y=${event.clientY}`);
3});

Questo codice mostra la posizione (coordinate X e Y) nella console ogni volta che il mouse si muove.

Eventi dei moduli

Gli eventi relativi ai moduli includono submit e input. L'evento submit si verifica quando viene inviato un modulo e generalmente provoca un ricaricamento della pagina, ma spesso si utilizza event.preventDefault() per evitarlo.

Esempio: Prevenire il ricaricamento della pagina durante l'invio di un modulo

1<form id="myForm">
2    <input type="text" name="username">
3    <button type="submit">Submit</button>
4</form>

1const form = document.getElementById('myForm');
2
3form.addEventListener('submit', (event) => {
4    event.preventDefault();  // Prevent page reload
5    console.log('Form has been submitted');
6});

Questo codice impedisce il ricaricamento della pagina quando il form viene inviato e mostra invece un messaggio nella console.

Propagazione degli eventi (Bubbling e Capturing)

Gli eventi si propagano attraverso due fasi: la fase di capturing, che procede dagli elementi genitori agli elementi figli, e la fase di bubbling, che procede dagli elementi figli verso gli elementi genitori.

Bubbling degli eventi

Per impostazione predefinita, gli eventi si verificano sull'elemento più interno e si propagano verso l'esterno. Questo processo è chiamato bubbling.

Esempio: Esempio di bubbling

1<div id="parentDiv">
2    <button id="myButton">Click me</button>
3</div>

 1const parent = document.getElementById('parentDiv');
 2const button = document.getElementById('myButton');
 3
 4parent.addEventListener('click', () => {
 5    console.log('Parent element was clicked');
 6});
 7
 8button.addEventListener('click', () => {
 9    console.log('Button was clicked');
10});

In questo esempio, quando si fa clic su un pulsante, l'evento del pulsante si verifica per primo, seguito dall'evento dell'elemento genitore.

Capturing degli eventi

Specificando true come terzo argomento in addEventListener(), è possibile gestire gli eventi durante la fase di capturing.

1parent.addEventListener('click', () => {
2    console.log('Capturing: Parent element was clicked');
3}, true);

Questo codice gestisce l'evento click dell'elemento genitore nella fase di cattura e visualizza un messaggio nella console.

Prevenire la propagazione con `stopPropagation()`

Puoi impedire la propagazione degli eventi usando event.stopPropagation().

1button.addEventListener('click', (event) => {
2    event.stopPropagation();  // Stop the event propagation
3    console.log('Button was clicked (no propagation)');
4});

Questo codice impedisce la propagazione dell'evento quando si clicca il pulsante e visualizza un messaggio nella console.

Rimozione degli eventi

Puoi rimuovere i listener di eventi usando removeEventListener(). Per rimuovere un listener di eventi, hai bisogno di un riferimento alla funzione specificata in addEventListener().

1function handleClick() {
2    console.log('Clicked');
3}
4
5const button = document.getElementById('myButton');
6button.addEventListener('click', handleClick);
7button.removeEventListener('click', handleClick);  // Remove the event listener

Questo codice rimuove il listener dell'evento click dal pulsante, così non verrà più gestito al clic.

Eventi personalizzati

In JavaScript, puoi creare e attivare eventi personalizzati oltre agli eventi standard. Usa il costruttore CustomEvent.

 1document.addEventListener('myCustomEvent', (event) => {
 2    console.log(event.detail.message);  // Displays "Hello!"
 3});
 4
 5const event = new CustomEvent('myCustomEvent', {
 6    detail: {
 7        message: 'Hello!'
 8    }
 9});
10document.dispatchEvent(event);

Questo codice crea e invia un evento personalizzato myCustomEvent e mostra i suoi dettagli nella console.

Riepilogo

La gestione degli eventi è un elemento essenziale per migliorare l'interattività delle applicazioni web. Utilizzando i componenti della gestione degli eventi, puoi offrire un'esperienza utente più flessibile e sofisticata.

Listener Evento: Usa addEventListener() per impostare un gestore di eventi su un elemento.
Oggetto Evento: Quando un evento si verifica, viene passato un oggetto evento che può essere utilizzato per ottenere informazioni dettagliate.
Propagazione Evento: Gli eventi si propagano in due fasi: bubbling (propagazione verso l'alto) e capturing (propagazione verso il basso).
Eventi del Modulo ed Eventi Personalizzati: Puoi gestire gli invii di moduli e i tuoi eventi personalizzati.

Puoi seguire l'articolo sopra utilizzando Visual Studio Code sul nostro canale YouTube. Controlla anche il nostro canale YouTube.

YouTube Video

Shadow DOM in JavaScript

Gestione degli eventi in JavaScript

YouTube Video

Gestione degli eventi in JavaScript

Basi degli Eventi

Aggiungere i Listener degli Eventi

Sintassi di base di addEventListener()

Oggetto Evento

Esempio: Utilizzo dell'oggetto evento

Eventi tipici

Evento click

Eventi della tastiera

Eventi del mouse

Eventi dei moduli

Esempio: Prevenire il ricaricamento della pagina durante l'invio di un modulo

Propagazione degli eventi (Bubbling e Capturing)

Bubbling degli eventi

Esempio: Esempio di bubbling

Capturing degli eventi

Prevenire la propagazione con stopPropagation()

Rimozione degli eventi

Eventi personalizzati

Riepilogo

YouTube Video

Sintassi di base di `addEventListener()`

Prevenire la propagazione con `stopPropagation()`