La differenza di prestazioni sarà trascurabile. Tecnicamente il gestore di focus sta facendo un lavoro extra allegando un gestore di eventi all'elemento, quindi le prestazioni dovrebbero rallentare, tuttavia dubito che questa sia una differenza misurabile.
Se il numero di gestori di eventi rallenta la pagina verso il basso, La delega eventi JavaScript è una risposta migliore ai problemi di prestazioni.
Gli eventi di messa a fuoco e sfocatura sono poco complessi per la delega degli eventi. I browser più recenti supportano gli eventi "focusin" e "focusout", che sono versioni bubbling di "focus" e "blur" rispettivamente:
document.documentElement.addEventListener("focusin", handleFocus, false);
document.documentElement.addEventListener("focusout", handleFocus, false);
I browser meno recenti supportano solo "focus" e "blur" che non hanno bolle. Puoi ancora supportare quei vecchi browser se supportano correttamente addEventListener associando i gestori alla fase di acquisizione di un evento:
document.documentElement.addEventListener("focus", handleFocus, true);
document.documentElement.addEventListener("blur", handleBlur, true);
Questo significa che allega 1 gestore di eventi per evento al caricamento della pagina. La proprietà document.documentElement fa riferimento all'elemento <html> ed è disponibile nel momento in cui JavaScript inizia l'esecuzione, quindi non dovrai più attendere che il DOM sia "pronto".
Quindi devi solo rilevare se il target dell'evento è un elemento che ti interessa prima di iniziare a lavorare:
function handleFocus(event) {
if (event.target.nodeName !== "INPUT") {
return;
}
console.log("input received focus");
}
function handleBlur(event) {
if (event.target.nodeName !== "INPUT") {
return;
}
console.log("input lost focus");
}
Quindi, probabilmente stai tentando di risolvere il problema di prestazioni sbagliato.
Il vantaggio che ottieni associando il gestore di eventi "sfocatura" su focus è che si lavora meno con il caricamento della pagina per collegare i gestori di eventi. Puoi mitigare questo problema utilizzando invece la delega degli eventi.
E c'è ancora un vantaggio per la delega degli eventi che non è ovvio. Quando si aggiungono dinamicamente elementi alla pagina, chiamando appendChild(element) o analizzando HTML tramite element.innerHTML = "..." , non è necessario eseguire alcun lavoro aggiuntivo per collegare i gestori di eventi agli elementi <input> aggiunti di recente. Aiuta davvero a ripulire e semplificare il codice del gestore di eventi.