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.