5

Tengo una curiosidad con respecto a buenas practicas en JavaScript. Examinando la pagina de w3schools y me encontré con estas tres formas:

HTML:

<element onclick="myScript">

JavaScript

object.onclick = function(){ myScript };

addEventListener

object.addEventListener( "click", myScript);

siendo esta última, no compatible con IE 8 ni versiones anteriores.

¿Qué forma de trabajar es más conveniente?¿O cada una tiene sus propias ventajas para ciertos aspectos?

1

1 respuesta 1

6

Como comentas, los tres métodos van a funcionar, pero se diferencian en cómo operan y en el soporte que tiene. Qué forma deberías usar o es más conveniente va a depender de tu caso particular, las necesidades del proyecto, el soporte requerido...

Voy a poner un análisis/descripción/crítica de cada uno de ellos y al final mi recomendación (y ya de paso voy a añadir un método adicional que no se menciona en la pregunta pero que puede ser interesante).


Scripts inline: <element onclick="myScript">

Esta sería la manera más directa de agregar el controlador de un evento para un elemento: directamente en el elemento en sí. Pero no te recomendaría que la usases:

  • Es más difícil de mantener,
  • Sólo puede haber un atributo onclick (pero puedes realizar varias operaciones desde uno solo),
  • Entremezcla diferentes lenguajes (HTML y JavaScript),
  • No permite utilizar algunos elementos de JavaScript (p.e. clausuras o funciones anónimas),
  • En algunos casos directamente no funcionará (p.e. en las extensiones de Chrome).

Como decía al principio de la lista, mi recomendación sería que no usases este método.


Asignando el evento: object.onclick = function(){ myScript };

Esta manera es "similar" a la anterior, en el sentido de que estás asignando un valor al atributo onclick del elemento, pero como se ejecuta en el lado del código JavaScript, te va a dar algo más flexibilidad y libertad: puedes usar clausuras y funciones anónimas, y tienes más control sobre el entorno y el ámbito de las variables.

Pero este método tiene un problema que no debe obviarse: sólo puede haber un atributo onclick. ¿Qué quiere decir esto? Que si por cualquier motivo a lo largo de tu código vuelves a asignar el onclick a un elemento, el valor que tuviera antes se pierde.

Por ejemplo, en el siguiente código al botón le asignamos dos onclick pero sólo el último se ejecuta:

var boton = document.getElementById("boton");

boton.onclick = function() { alert("Primer onclick"); }
boton.onclick = function() { alert("Segundo onclick"); }
<button id="boton">PULSA</button>

Mi recomendación: si estás 100% seguro/a de que sólo vas a definir más de un onclick podrías usar este método con confianza.


Detector de eventos: object.addEventListener( "click", myScript);

La principal ventaja de este métodos sobre los otros dos: te permite asociar más de un evento click al elemento y se ejecutarán en el mismo orden en el que fueron asociados. Además, y como en el método anterior, te permite el uso de clausuras, funciones anónimas, referencias a funciones, etc.

Por ejemplo, al siguiente botón le asignamos dos controladores del click y se ejecutan ambos:

var boton = document.getElementById("boton");

boton.addEventListener("click", function() { alert("Primer click"); });
boton.addEventListener("click", function() { alert("Segundo click"); });
<button id="boton">PULSA</button>

Un problema, como bien comentas, es que este método no funciona en versiones de IE anteriores a la 9 (en las que se podría usar el equivalente attachEvent); pero teniendo en cuenta que el soporte para todas las versiones de IE anteriores a la 11 terminó en Enero de 2016, a no ser que tengas que soportarlas por algún motivo corporativo, deberías ignorar este problema.

Este sería el método que, a no ser que tengas restricciones de soporte, te recomendaría que usases.


Usar bibliotecas: $(elemento).on("click", function() { myScript }

Sé que esto no estaba incluido dentro de los tres métodos que pusiste, pero creo que podría ser interesante añadirlo como alternativa. Las bibliotecas JavaScript te permitirán asociar eventos a los elementos y se saltarán algunos de los problemas que se describen arriba.

Por ejemplo: con jQuery se pueden asociar múltiples controladores al evento click (como con addEventListener), pero sin los problemas de compatibilidad que addEventListener presenta ya que el mismo código funcionará en todas las versiones de IE.

Con el ejemplo del botón anterior:

$("#boton").on("click", function() { alert("Primer click"); });
$("#boton").on("click", function() { alert("Segundo click"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="boton">PULSA</button>

Eso no quiere decir que todos debamos usar jQuery siempre: tiene sus cosas buenas y sus cosas malas (se estaría añadiendo una nueva fuente pesada, aunque tampoco mucho) y añadirlo a un proyecto sólo porque abstraiga mejor la asociación de eventos es una exageración y no merece la pena.

4
  • 3
    Excelente respuesta Alvaro, siempre aprendo cosas nuevas con tus aportes. el 2 oct. 2016 a las 1:24
  • 1
    +1 Aunque yo matizaría lo de "mi recomendación sería que no usases este método" (inline), anoto otra ventaja (obvia) de los otros métodos: sirven también para elementos creados dinámicamente.
    – leonbloy
    el 2 oct. 2016 a las 2:53
  • 1
    @leonbloy ¿qué pondrías para matizarlo?
    – Alvaro Montoro
    el 2 oct. 2016 a las 2:56
  • 1
    El método inline se podría poner en elementos creados dinámicamente con innerHTML, por ejemplo: midiv.innerHTML = "<button onclick='alert(123)'>PULSA</button>"; (sé que no es bonito, pero funciona)
    – Alvaro Montoro
    el 2 oct. 2016 a las 3:00

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.