Cos'è la programmazione event-driven: fondamenti ed esempi

Ultimo aggiornamento: 14/10/2025
Autore: Isaac
  • 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

Illustrazione della programmazione guidata dagli eventi

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.

Diagramma di flusso degli eventi in un'applicazione

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.
  Creative Cloud non si apre o continua a caricarsi: cause reali e soluzioni

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.

  20 migliori modelli di budget in Fogli Google

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.
  Spotify ReVanced: musica senza pubblicità, gratuita e su misura

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.

eventi finestre eventi
Articolo correlato:
Tutorial per l'utilizzo degli eventi in PowerShell: dai log all'automazione avanzata