JavaScript: Event Listener vs Event Handler


Si queremos mantener limpio nuestro HTML y acercarnos más a una buena práctica deberíamos evitar atributos HTML tales como “onClick”. Es decir, evitemos códigos como estos:

Pero entonces, ¿cómo haríamos que se ejecute código cuando ocurra nuestro evento “onClick” en un determinado elemento?. Supongamos que tenemos el siguiente elemento en HTML:

El acceso correcto a dicho elemento para el evento en el que se hace click sobre él, sería:

¿Por qué crear un Listener (Event Listener) en lugar de poner una llamada al evento “onClick” (Event Handler)? La respuesta es que nuestro HTML queda mucho más limpio y además, en este caso, el formulario sería enviado incluso cuando JavaScript no está disponible (desactivado por parte del cliente o porque el navegador no lo soporte).

Una lectura interesante sobre el manejo de eventos, sería el Flujo de eventos: Captura y Burbuja, para entender más sobre los parámetros de addEventListener.

NOTA: Tener en cuenta que IE, no soporta addEventListener en algunas de sus versiones.

Fuentes: