ENTENDIENDO LAS ETAPAS DEL CICLO DE VIDA DE EVENTOS EN JAVASCRIPT_esquema jerárquico con chinchetas

Comprendre les etapes del cicle de vida dels esdeveniments a JavaScript

JavaScript, com a llenguatge de programació, juga un paper fonamental en la creació d’aplicacions web interactives i responsives. Una part essencial d’aquesta interacció és la gestió d’esdeveniments, i per entendre completament com funciona, hem d’explorar el cicle de vida de JavaScript en el context del Model d’Objectes de Document (DOM). Aquest viatge ens portarà a través de la propagació d’esdeveniments i la comprensió de l’ordre en què s’executen els gestors d’esdeveniments.

El Model d’Objectes de Document (DOM)

El DOM és una representació jeràrquica d’una pàgina web. Cada element en una pàgina web, com ara paràgrafs, imatges, botons i més, es representa com un node a l’arbre del DOM. Aquest arbre té una estructura de pare-fill, on els elements fills estan continguts dins dels seus elements pare. Entendre aquesta jerarquia és crucial per comprendre com els esdeveniments es propaguen a través del DOM.

Propagació d’Esdeveniments al DOM

Quan es produeix un esdeveniment en un element del DOM, com fer clic en un botó, aquest esdeveniment es propaga a través de l’arbre del DOM. Aquest procés de propagació segueix una seqüència específica que hem de comprendre per gestionar els esdeveniments de manera efectiva.

Fase de Captura

La Fase de Captura és crucial perquè ofereix l’oportunitat de preparar el terreny abans que l’esdeveniment arribi al seu destí final. Durant aquesta fase, els gestors d’esdeveniments registrats en els elements “pare” de l’element de destí poden intervenir i realitzar accions prèvies a l’esdeveniment.

Suposem que tens una pàgina web amb una llista d’elements i vols afegir un esdeveniment de clic a cada element de la llista. També vols que, quan es faci clic en un element, es faci alguna acció en un element específic dins d’aquest element de la llista.

La Fase de Captura et permet intervenir abans que es produeixi l’esdeveniment de clic a l’element de destí. En aquest cas, pots utilitzar la Fase de Captura per detectar el clic a l’element pare de la llista i després determinar si el clic es va fer en un dels elements de la llista. Això et permet realitzar accions prèvies al clic i decidir si l’esdeveniment ha de continuar propagant-se o no.

Per registrar un gestor d’esdeveniments a la Fase de Captura, pots utilitzar el mètode addEventListener en un element específic.

Fase d’Objectiu

La Fase d’Objectiu és la segona fase del cicle de vida d’un esdeveniment a JavaScript. En aquesta fase, l’esdeveniment arriba al seu destí final, és a dir, l’element HTML on va ocórrer l’esdeveniment. En aquest punt, s’executa qualsevol codi associat a aquest esdeveniment a l’element de destí.

La Fase d’Objectiu és crucial per a la interactivitat a les aplicacions web. Permet que els esdeveniments es gestionin de manera específica en funció de l’element on han ocorregut. Això és essencial per crear experiències d’usuari personalitzades i responsives. Per exemple, en una pàgina web amb diversos botons, cada botó pot realitzar una acció diferent quan es fa clic, i la Fase d’Objectiu garanteix que només s’executi el codi associat al botó que es va clicar.

Fase de Bombolla

Per entendre com funciona la Fase de Bombolla, considerem un exemple comú: un esdeveniment de clic en un botó d’una pàgina web.

  • Registre de l’Esdeveniment: Primer, registra un gestor d’esdeveniments per al botó mitjançant JavaScript amb el mètode addEventListener.
  • Clic de l’Usuari: Un usuari visita la pàgina i fa clic al botó. L’esdeveniment comença a propagar-se.
  • Fase de Captura i Objectiu (Opcional): Abans d’arribar al botó, l’esdeveniment pot passar per les fases de Captura i Objectiu, segons com s’hagin registrat els gestors d’esdeveniments. Això permet l’execució de codi abans i després d’arribar a l’element de destí.
  • Fase de Bombolla: Després, l’esdeveniment arriba al botó i s’executa el codi associat a l’esdeveniment de clic en aquest botó. Després d’això, l’esdeveniment comença a “bombollejar” cap amunt a través del DOM.
  • Captura de l’Esdeveniment pels Elements Superiors: A mesura que l’esdeveniment bombolleja cap amunt, altres elements superiors al DOM tenen l’oportunitat de capturar l’esdeveniment i executar el seu propi codi associat, si tenen gestors d’esdeveniments registrats.

La Fase de Bombolla és important perquè permet que diversos elements en una pàgina web responguin al mateix esdeveniment. Això és especialment útil quan tens una estructura d’elements HTML anidats i vols que diversos d’aquests elements reaccionin al mateix esdeveniment, com ara un clic de ratolí.

Per exemple, en una llista d’elements, pots registrar un gestor d’esdeveniments al contenidor de la llista i permetre que l’esdeveniment de clic es propagui a través de tots els elements secundaris de la llista. D’aquesta manera, pots aconseguir un comportament uniforme en tots els elements de la llista.

L’Ordre dels Gestors d’Esdeveniments

La major part del temps, hi haurà diversos gestors per al mateix esdeveniment en una pàgina web. Per comprendre i gestionar eficaçment aquests esdeveniments, és essencial conèixer l’ordre en què s’executen els gestors d’esdeveniments. L’ordre d’execució és el següent:

  1. Els gestors registrats als elements pare s’executen abans d’arribar a l’element objectiu.
  2. S’executa el gestor de l’element objectiu.
  3. Els gestors registrats als elements pare s’executen de nou, en ordre invers al de la fase de captura.

Desencadenar un Esdeveniment

El cicle de vida d’un esdeveniment comença amb el seu desencadenament. Un esdeveniment pot ser desencadenat per diverses accions, com fer clic en un element, moure el ratolí sobre ell, prémer una tecla al teclat o fins i tot carregar una pàgina web. L’element que desencadena l’esdeveniment es coneix com el “objectiu” o el “objectiu de l’esdeveniment”.

Detenció de la Propagació

En qualsevol moment durant les fases de captura, objectiu o bombolla, és possible aturar la propagació de l’esdeveniment. Això s’aconsegueix mitjançant el mètode stopPropagation(). Quan es crida aquest mètode en un esdeveniment, l’esdeveniment ja no es propagarà més enllà de l’element actual. Això significa que no afectarà els elements en fases posteriors.

Prevenció del Comportament Predeterminat

A més d’aturar la propagació de l’esdeveniment, també és possible prevenir el seu comportament predeterminat mitjançant el mètode preventDefault(). Això és útil quan es vol anul·lar el comportament estàndard de certes accions, com evitar que un enllaç segueixi la seva URL o prevenir que s’enviï un formulari.

El cicle de vida de JavaScript en el context del Model d’Objectes de Document és una part fonamental de la programació web interactiva. Comprendre com els esdeveniments es propaguen a través del DOM i l’ordre en què s’executen els gestors d’esdeveniments és essencial per crear aplicacions web efectives i responsives. Aquest coneixement ens permet gestionar els esdeveniments de manera eficaç i millorar l’experiència de l’usuari a les nostres aplicacions web.

Bones Pràctiques amb Esdeveniments

Les bones pràctiques en el maneig d’esdeveniments a JavaScript són fonamentals per desenvolupar aplicacions web eficients i mantenibles.

Ús de addEventListener

En lloc d’assignar directament un gestor d’esdeveniments a una propietat d’esdeveniments en un element HTML, com ara onclick, es recomana utilitzar el mètode addEventListener. Això permet adjuntar múltiples gestors d’esdeveniments al mateix element sense sobreescriure els existents.

Evitar l’Ús d’Atributs onclick

Evita barrejar lògica JavaScript directament en els atributs HTML, com ara onclick. Això pot fer que el codi sigui més difícil de mantenir i depurar.

Eliminar Gestors d’Esdeveniments quan ja no són necessaris

Per evitar possibles problemes de rendiment i pèrdues de memòria, assegura’t d’eliminar els gestors d’esdeveniments quan els elements associats ja no siguin necessaris o hagin estat eliminats del DOM.

Delegació d’Esdeveniments

Quan treballes amb múltiples elements que han de respondre al mateix tipus d’esdeveniment, considera utilitzar la delegació d’esdeveniments. Això implica registrar un sol gestor en un element superior i determinar l’objectiu de l’esdeveniment dins del gestor. És més eficient que registrar gestors en cada element individual.

Comprendre la Propagació d’Esdeveniments

És important comprendre les fases de captura, objectiu i bombolla per controlar adequadament quan i on s’executen els gestors d’esdeveniments.

Evitar Esdeveniments Aniuats en Bucles

Evita registrar esdeveniments dins de bucles, ja que això pot portar a problemes de rendiment. Si necessites gestionar esdeveniments en diversos elements, utilitza la delegació d’esdeveniments.

Evitar Esdeveniments en Línia

Evita la definició d’esdeveniments directament en el codi HTML en línia. És preferible assignar controladors d’esdeveniments des de l’arxiu JavaScript. Això permet mantenir una separació neta entre la lògica i l’estructura HTML.

Evita l’ús excessiu d’esdeveniments personalitzats

Encara que els esdeveniments personalitzats poden ser útils, evita crear-ne un excés. Manté un equilibri i utilitza esdeveniments personalitzats només quan sigui realment necessari.

Documentació i Comentaris

Documenta els teus controladors d’esdeveniments i proporciona comentaris clars per explicar el seu propòsit i funcionament. Això facilita la col·laboració amb altres desenvolupadors i la comprensió del codi en el futur.

Proves Unitàries

Sempre prova els teus controladors d’esdeveniments per assegurar-te que funcionin segons el previst. Utilitza eines de prova com Jest o Jasmine per escriure proves unitàries pels teus esdeveniments.

En definitiva

En seguir aquestes bones pràctiques, podràs escriure codi JavaScript més net, eficient i fàcil de mantenir. Això contribuirà a una experiència de desenvolupament més productiva i a la creació d’aplicacions web robustes i responsives.

Si estàs cercant assessorament especialitzat o tens preguntes específiques sobre el maneig d’esdeveniments en JavaScript, el nostre equip a Itequia està aquí per ajudar-te. No dubtis en contactar-nos per obtenir assistència personalitzada en el teu desenvolupament web.

David Villanueva – Software Developer at Itequia