- Modello reattivo basato su eventi, listener e controller
- Supporta interfacce grafiche, reti asincrone e IoT in tempo reale
- Supporto multipiattaforma per JS, Node.js, Python/Tkinter e strumenti visivi
- Procedure consigliate: delega, pulizia dell'ascoltatore e gestione degli oggetti evento

La programmazione orientato agli eventi (POE) è l'approccio in cui un'applicazione non avanza in modo lineare, ma reagisce agli eventi man mano che si verificano. Invece di imporre un flusso rigido, il sistema attende e, quando viene attivato un evento (un clic, un tasto, un messaggio di rete, un timer), esegue il codice associato per gestirlo.
Questo stile è onnipresente: interfacce grafiche (web, desktop e mobile), server con I/O non bloccante, applicazioni Dashboard IoT o di monitoraggio in tempo reale. Se vi siete mai chiesti come un'app "sa" che avete premuto un pulsante o che è arrivata una risposta HTTP, la chiave è in ascoltatori, controller e un ciclo di eventi.
Cos'è esattamente la programmazione basata sugli eventi?
In un'architettura guidata dagli eventi, L'esecuzione è attivata da eventi osservabili nel sistema o generato dall'utente. Un evento è un segnale che indica che qualcosa è accaduto: spostare il mouse, digitare in un campo, completare un download, ricevere un pacchetto su un socket o che un sensore cambia stato.
Per reagire a questi eventi, vengono registrati ascoltatori che ascoltano specifici tipi di eventi e si associano ad essi gestori contenente le azioni da compiere. Tutto ciò è coordinato con il ciclo di eventi, che raccoglie, mette in coda e distribuisce gli eventi ai suoi controllori.
Concetti chiave che dovresti conoscere
È conveniente distinguere i componenti di base di questo paradigma, perché chiarire le responsabilità all'interno del sistema ed evitare confusione durante la progettazione.
Eventi
Un evento è una notifica che segnala che è accaduto qualcosa di significativo. Può includere dati allegati (ad esempio, il tasto premuto, la posizione del mouse o il payload da una risposta di rete) affinché il controllore prenda decisioni.
Mittenti e destinatari
Un trasmettitore è colui che genera l'evento (un pulsante, una presa, un timer). Un ricevitore o l'abbonato ascolta il tipo di evento ed esegue una funzione quando si verifica; questo disaccoppiamento consente ridimensionare e ricombinare i comportamenti facilmente.
Ciclo di eventi
È il cuore del sistema: mantiene una coda di eventi, li gestisce in ordine e chiama i gestori corrispondenti. In questo modo si creano app reattive che rispondono a più eventi simultanei senza bloccare il thread principale.
Ascoltatori e controllori
L'ascoltatore è l'"orecchio" che registra un elemento o un canale, mentre il controllore è il "cervello" che decide cosa fare quando attivatoSeparandoli si migliora la manutenzione e si favorisce il riutilizzo.

Tipi di eventi più comuni
Ce ne sono decine, ma questi gruppi coprono la maggior parte dei casi; Capirli ti fa risparmiare ore debug.
Mouse e puntatore
| Eventi | Quando succede |
|---|---|
| clicca | L'utente preme con il mouse o con il dito su un elemento. |
| passaggio del mouse sopra/uscita del mouse | Il puntatore entra o esce da un elemento (o da un elemento figlio). |
| menu contestuale | Fare clic con il tasto destro del mouse per aprire il menu contestuale. |
| mossa del mouse | Il puntatore si sposta sull'elemento. |
| mousedown / mouseup | Pulsante del mouse premuto o rilasciato. |
Finestra e documento
| Eventi | Quando succede |
|---|---|
| caricare | Il browser ha caricamento completato la pagina. |
| errore | Impossibile caricare una risorsa (CSS, copione, immagine) o altra operazione. |
| scorrere | La vista o un contenitore con overflow viene fatto scorrere. |
| mostra pagina / nascondi pagina | Modifiche alla visibilità delle schede o alla navigazione in bfcache. |
| ridimensionare | La finestra del browser viene ridimensionata. |
forme
| Eventi | Quando succede |
|---|---|
| inviare | Tenta di inviare un modulo (prima della navigazione). |
| messa a fuoco / messa a fuoco fuori | Un elemento (o il suo figlio) acquisisce o perde il focus. |
| ingresso | L'utente inserire i dati in un controllo (in tempo reale). |
| il cambiamento | Modificando il valore, il controllo perde lo stato attivo (casella di controllo, selezione, input). |
tastiera
| Eventi | Quando succede |
|---|---|
| keydown | Viene premuto un tasto. |
| chiave | Viene rilasciato un tasto. |
| pressione dei tasti | Viene premuto e rilasciato un tasto carattere (non tutti i tasti). |
L'oggetto evento e le proprietà utili
Quando viene attivato un listener, il controller riceve un oggetto con i dettagli dell'evento. Impara a spremerlo evitare di scrivere una logica fragile.
Proprietà e metodi generali:
- bersaglio: elemento che ha originato l'evento.
- Digitare: tipo (ad esempio 'clic', 'input').
- annullabile: Indica se l'azione predefinita può essere annullata.
- preventDefault(): annulla l'azione predefinita (se possibile).
- stopPropagation(): arresta la propagazione (formazione di bolle/cattura).
Extra frequenti in base alla tipologia: clientX/paginaX y clienteY/paginaY nel topo; quale o pulsante per il pulsante premuto; chiave y codice sui tasti; e sulla rotellina/scorrimento, deltaX / deltaY y Modalità delta.
Ascolto e gestione degli eventi in JavaScript
Sul web, è possibile registrare gli ascoltatori in HTML o tramite codice. Si consiglia struttura e comportamento separati, utilizzando addEventListener.
Opzione 1: attributo in linea
Sebbene non sia la pratica più pulita, a volte vedrai qualcosa di simile a questo, dove la funzione viene invocata quando si verifica l'evento:
<!-- myClickHandler es la función que manejará el clic -->
<button onclick='myClickHandler()'>Click</button>
<script>
function myClickHandler(){
alert('hola');
}
</script>
Opzione 2: addEventListener (consigliato)
Con questa tecnica si registra l'ascoltatore in fase di esecuzione; non chiami la funzione, basta passare il riferimento:
// index.html: <button id='b'>Borrar</button>
const btn = document.querySelector('#b');
const onClick = (e) => {
console.log('Pulsado', e.target);
};
btn.addEventListener('click', onClick);
// Eliminar el listener más tarde (mismos parámetros)
btn.removeEventListener('click', onClick);
Leggere il valore inserito dall'utente
Quando gestisci i moduli, e.valore.target è il tuo migliore amico per catturare input:
<input type='text' id='nombre' />
<script>
const input = document.querySelector('#nombre');
const onChange = (e) => {
console.log('Valor:', e.target.value);
};
input.addEventListener('change', onChange);
</script>
Node.js: EventEmitter in azione
Nell'ambiente server, Node.js espone un modello di pubblicazione/sottoscrizione utilizzando Emettitore di eventi, ideale per coordinare la logica asincrona, ad esempio quando Gestire registri ed eventi in Hyper-V, senza moduli di accoppiamento.
// Ejemplo mínimo de emisor y receptor en Node.js
const { EventEmitter } = require('events');
class BusEventos extends EventEmitter {}
const bus = new BusEventos();
// Suscribimos un receptor al evento 'saludo'
bus.on('saludo', (nombre) => {
console.log(`¡Hola, ${nombre}!`);
});
// Disparamos el evento con datos asociados
bus.emit('saludo', 'mundo');
Il modello consente più ricevitori rispondere allo stesso evento o che un emittente non conosca specifici sottoscrittori, favorendo il disaccoppiamento e le tecniche per Filtra gli eventi critici con Get-WinEvent.
Python: da un semplice trasmettitore a Tkinter
En Python È possibile creare un micro bus di eventi con dizionari di elenchi oppure utilizzare librerie/GUI come Tkinter che fanno già parte di un ciclo di eventi della finestra.
Trasmettitore di base in Python
Questo scheletro dimostra come registra i callback e lanciarli emettendo un evento:
class Emisor:
def __init__(self):
self._suscriptores = {}
def on(self, evento, fn):
self._suscriptores.setdefault(evento, []).append(fn)
def emit(self, evento, *args, **kwargs):
for fn in self._suscriptores.get(evento, []):
fn(*args, **kwargs)
# Uso
bus = Emisor()
bus.on('saludo', lambda: print('¡Hola, mundo!'))
bus.emit('saludo')
Tkinter: associazione di eventi del mouse e della tastiera
Le interfacce grafiche desktop si basano su un ciclo di eventi. In Tkinter, legare associa un evento testuale a una funzione che riceve l'oggetto evento:
from tkinter import Tk, Frame
def on_key(evt):
print('Tecla:', repr(evt.char))
def on_click(evt):
frame.focus_set()
print('Click en', evt.x, evt.y)
root = Tk()
frame = Frame(root, width=200, height=120)
frame.bind('<Key>', on_key)
frame.bind('<Button-1>', on_click)
frame.pack()
root.mainloop()
Si noti che gli eventi del mouse operano su widget sotto il cursore, mentre le scorciatoie da tastiera influenzano il widget che ha il focus.
MIT App Inventor: eventi, proprietà e metodi
App Inventor adotta un approccio visivo con blocchi che rappresentano eventi, che rende più facile per i principianti creare app mobili senza codice di testo.
Eventi: blocco che viene attivato da un evento (pressione di un pulsante, apertura dello schermo, inclinazione del dispositivo). proprietà: attributi dei componenti (dimensione del carattere, colore, allineamento) che è possibile impostare in fase di progettazione o di esecuzione. Metodi: azioni pre-programmate eseguite da un componente (ad esempio, SetFocus, AddItem), disponibili solo in fase di esecuzione.
Pertanto, un'app non segue istruzioni fisse; reagisce ai blocchi di eventi richiamando metodi o modificando proprietà a seconda dei casi.
Eventi automatici vs eventi avviati dall'utente
Ci sono eventi attivati dal sistema (ad esempio, quando si apre una finestra, fine di un download, tick del timer o eventi di hardware come Rileva eventi USB in Linux) e altri causati dall'utente (clic, digitazione, trascinamento, gesti). In entrambi i casi la logica è organizzata attorno all' driver associati.
Applicazioni pratiche del modello event-driven
- Interfacce utente interattive: Ogni interazione (clic, digitazione, selezione) attiva azioni che aggiornano lo stato o DOM, offrendo un'esperienza fluida.
- Comunicazione asincrona: Nei server web e nei microservizi, gli eventi di rete (arrivo di una richiesta, messaggio in un broker) consentono processo senza blocco e arrampicarsi.
- Elaborazione dei dati in tempo reale: La telemetria, l'IoT e il monitoraggio dipendono dagli eventi dei sensori che attivano risposte immediate (avvisi, aggregazioni, dashboard) e possono essere integrati con strumenti quali Visiera di eventi di Windows per l'analisi.
- Sistemi operativi e concentrarsi: Il sistema operativo indirizza gli eventi all'app che ha il focus (vedere gestore eventi di Windows). Ogni app mantiene il suo ciclo di eventi che agisce sulla finestra attiva, che coordina più app che funzionano in parallelo.
Vantaggi e svantaggi
Tra i punti di forza ci sono: interattività immediata, uso efficiente delle risorse (il codice viene eseguito solo quando accade qualcosa) e la flessibilità di combinare mittenti e destinatari.
D'altra parte, un sistema con molti eventi e gestori può portare a complessità accidentale, difficile da correggere se non è ben documentato o se mancano chiari modelli organizzativi.
Buone pratiche per lavorare con gli eventi
- Delegazione dell'evento: Invece di registrare gli ascoltatori su molti nodi, aggiungine uno in un contenitore e decidi cosa fare in base a quello. evento.target; Questo riduce la memoria e l'accoppiamento.
- Pulizia degli ascoltatori: cancella con removeEventListener quelli di cui non hai più bisogno o durante lo smontaggio dei componenti (fondamentale nelle viste SPA e dinamiche) per prevenire perdite.
- Struttura del codice: separa la sottoscrizione (ascoltatori) dalla logica (gestori) e riutilizza le funzioni pure per facilitare i testDocumenta i tipi di eventi e il loro payload.
- gestione degli errori: Cattura le eccezioni nei gestori e registra il contesto (tipo di evento, destinazione, dati) per accelerare la diagnosi in produzione.
Confronto rapido con la programmazione sequenziale
Mentre la programmazione tradizionale prevede un flusso controllato dal programmatore, la POE lascia il controllo all'utente e al sistema: il vero ordine è segnato dagli eventiCiò richiede di pensare in termini di stati e reazioni piuttosto che di passaggi lineari.
Breve esempio completo sul web: dall'evento all'azione
Diamo un'occhiata a un mini flusso con prevenzione delle azioni predefinite e lettura dei dati, che collega diverse idee in una modulo con convalida:
<form id='f'>
<input id='email' type='email' required />
<button type='submit'>Enviar</button>
</form>
<script>
const f = document.querySelector('#f');
f.addEventListener('submit', (e) => {
e.preventDefault(); // Evita envío si hay problemas
const valor = document.querySelector('#email').value;
if (!valor.includes('@')) {
console.error('Email no válido');
return;
}
// Aquí podrías emitir un evento de aplicación o hacer fetch
console.log('Form OK. Enviando...');
});
</script>
Qui combiniamo preventDefault per controllare il flusso, la lettura di e.target/valore e un gestore che decide l'azione successiva.
La programmazione basata sugli eventi consente di creare software agile e reattivo, dalle interfacce utente moderne alle pipeline in tempo reale. Se si interiorizzano i suoi pilastri:eventi, ascoltatori, gestori e ciclo di eventi—e applichi buone pratiche (delega, pulizia e tracciabilità), avrai una solida base per creare applicazioni robuste, scalabili e piacevoli da usare.
Scrittore appassionato del mondo dei byte e della tecnologia in generale. Adoro condividere le mie conoscenze attraverso la scrittura, ed è quello che farò in questo blog, mostrarti tutte le cose più interessanti su gadget, software, hardware, tendenze tecnologiche e altro ancora. Il mio obiettivo è aiutarti a navigare nel mondo digitale in modo semplice e divertente.