lanzar eventos en javaScript

Tres maneras de engarzar nodos y eventos en javaScript

Antonio Palolo

archivado en: JavaScript / 21 marzo, 2016

En javaScript nativo hay tres formas de lanzar eventos. Una se remonta al webozeno anterior y consiste en definir el evento directamente en el tag de un nodo.

<button onclick="foo()">Bazinga!</button>

Esta manera cayó en desuso hace años, en gran parte gracias a jQuery, por razones que ya no tienen sentido, como la posibilidad hoy imposible de que un navegador no soportase javaScript, pero también por otras que siguen siendo razonables. A vuelapluma:

  • Los tests son más complicados.
  • Se mezcla el html con el js, la estructura con la lógica, lo que en principio no es bueno, pues dificulta el desarrollo, el mantenimiento y la posibilidad de adaptar la plantilla, la vista, a otras plataformas o frameworks.
  • Es más complicado eliminar la escucha.

Frente a esto se podría argumentar que en polymer y angular los eventos han vuelto al tag, y en general cuando los google-developers hacen algo lo hacen con fundamento, pero en estos casos parece sensato hacerlo así ya que parte de la lógica del controlador recae en la vista, sobre todo en angular con sus ng-cosas.

La segunda manera de enganchar un evento es definiéndolo directamente entre las propiedades onevent del nodo.

function foo() {

// do stuff

}

document.getElementById('bazinga').onclick = foo.

Y para eliminar la escucha es tan sencillo como setear de nuevo la propiedad a null.

document.getElementById('bazinga').onclick = null.

El principal problema que plantea esta solución es que, al ser una propiedad, solo puede tener un valor, por lo que solo podríamos engarzar una función por evento o, incluso, sobreescribirla de forma inintencionada. Además, complica un poco el manejo de la propagación de eventos (bubbling).

En cualquier caso, aunque no suele emplearse, a veces por desconocimiento, no hay razones realmente poderosas para no ligar así los eventos si lo necesitamos.

Y la tercera manera es con el método addEventListener.

document.getElementById('bazinga').addEventListener('click', foo, true);

Se puede eliminar la escucha mediante un removeEventListener(), permite manejar la distribución de eventos de forma bastante elegante  y es lo más cómodo para los test. Ahora bien, a cambio hay que estructurar bien el código para prevenir doble-bindeos, un error habitual cuando se trabaja con ajax y demás fórmulas de generación dinámica del DOM. (El truco es desbindear siempre antes de bindear :P).

En síntesis, lo mejor es recurrir a los eventListener, pero no debe darnos un infarto si nos topamos con un onevent.

|| Tags: ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Aportar un comentario


*