Info Atributos de manejador de eventos en línea
Por qué se desaconsejan onclick y otros atributos de manejador de eventos en línea, y cómo interactúan con Content-Security-Policy.
El validador marca atributos como onclick, onload, onmouseover y cualquier otro atributo on* usado directamente en el markup.
Ejemplo
<!-- Desaconsejado -->
<button onclick="enviarFormulario()">Enviar</button>
<!-- Preferido -->
<button id="boton-enviar">Enviar</button>
<script>
document.getElementById("boton-enviar").addEventListener("click", enviarFormulario);
</script>Por qué importa
Los manejadores de eventos en línea mezclan comportamiento directamente en el markup, lo cual hace más difícil ver en todas partes dónde está conectado un comportamiento, y más difícil quitar o reemplazar un listener de forma limpia (no hay un equivalente directo en línea de removeEventListener). De forma más concreta, un Content-Security-Policy estricto sin unsafe-inline en su directiva script-src bloquea directamente los manejadores de eventos en línea — el atributo simplemente nunca se ejecuta, sin más error que un reporte de violación de CSP. Conectar el mismo comportamiento con addEventListener desde un script externo o con nonce funciona bajo un CSP estricto.
Frequently asked questions
¿Quitar los manejadores en línea va a romper mi sitio?
No si reemplazas cada uno con una llamada equivalente a addEventListener — el comportamiento es idéntico, solo que conectado desde script en vez de desde el markup. Solo se vuelve urgente si estás adoptando un Content-Security-Policy que bloquea unsafe-inline.
¿Esto incluye los bloques <script> en línea?
No — esta revisión solo mira los atributos on* en elementos HTML (onclick, onload, etc.), no las etiquetas <script>. Los bloques <script> en línea tienen sus propias consideraciones de CSP (nonces/hashes) pero no son lo que reporta esta revisión.