Curso HTML 14.4 Manejadores de eventos inline vs externos

Curso HTML 14.4 Manejadores de eventos inline vs externos

En este punto del curso profundizaremos en dos formas de asignar manejadores de eventos en HTML y JavaScript: los manejadores inline (atributos HTML) y los externos (a través de JavaScript). Veremos sus características, ventajas, inconvenientes y buenas prácticas.

1. Manejadores inline

Se definen directamente en el atributo HTML del elemento. Su sintaxis es sencilla, pero tiene limitaciones en separación de responsabilidades y mantenimiento.

Saludar Alice

Comentarios internos al código:

• El HTML y la lógica JavaScript quedan acoplados.
• No se pueden agregar múltiples listeners fácilmente.
• Debugging y refactorización se complica al tener código incrustado.

2. Manejadores externos (addEventListener)

Separan la estructura (HTML) de la lógica (JavaScript). Se usan métodos del DOM como addEventListener para vincular funciones.

Saludar Bob

3. Comparativa

4. Ventajas y desventajas

• Inline
  • + Muy fácil y rápido para demos o prototipos.
  • – Mal mantenimiento en aplicaciones medianas/grandes.
  • – No permite gestionar múltiples listeners ni quitar el handler.
• Externo
  • + Fomenta separación de lógica y estructura.
  • + Permite múltiples listeners y removerlos.
  • + Facilita testing, debugging y reutilización.
  • – Requiere un poco más de código inicial.

5. Profundización técnica

Al usar addEventListener, el manejador se registra en una lista interna de listeners del elemento. Esto implica:

• Las funciones se ejecutan en orden de registro.
• Se puede usar event.preventDefault() y event.stopPropagation().
• Para eliminar: removeEventListener(tipo, función, [opciones]).

Pulsar (se quita en 5s)

Además, la pasada de parámetros en manejadores externos suele hacerse con closures o bind:

Saludo Bind

6. Buenas prácticas

• No usar manejadores inline en producción.
• Agrupar todo el código JS en archivos externos.
• Esperar siempre al evento DOMContentLoaded o ubicación de script al final.
• Pasar funciones nombradas para facilitar debugging y remover listeners.
• Utilizar addEventListener para aprovechar características avanzadas (captura, opciones, once).

7. Conclusión

Los manejadores inline pueden resultar útiles en ejemplos simples o demostraciones rápidas, pero en aplicaciones reales la recomendación es utilizar manejadores externos mediante addEventListener. Esto garantiza una mejor organización del código, escalabilidad, posibilidad de añadir/quitar listeners y una clara separación entre marcación y lógica de negocio.