Con JavaScript possiamo implementare la delegazione degli eventi.
L'approccio è simile a quello usato in jQuery: aggiungiamo un listener all'oggetto document e specifichiamo quale evento usare. L'oggetto evento nella funzione di callback possiede la proprietà target che restituisce un riferimento DOM all'elemento del documento su cui si innesca l'evento. A questo punto possiamo restringere la selezione ad un elemento specifico.
Quello che jQuery nasconde è la gestione della fase di risalita (bubbling) degli eventi, che nel caso del metodo addEventListener() viene gestita dal terzo parametro booleano (useCapture). Nel nostro caso specifico, abbastanza raro, gli elementi di tipo input non hanno una risalita dell'evento specificato, quindi dobbiamo catturare esplicitamente l'evento usando il valore true. Negli altri casi il valore può essere false.
'use strict';
document.addEventListener('focus', e => {
let input = e.target;
if(input.classList.contains('delegate')) {
input.value = 'Delegated focus event';
}
}, true);