0

tengo una duda en cuanto a eventos de JavaScript. Cual sería la diferencia entre hacer esto:

   <script>
   function mostrarMensaje(){
alert("Hola mensaje desde funcion!");
      }
   </script>
   <input id="clickeable" type="button" value="Hacé click"  onclick="mostrarMensaje()"/>

Y esto?

 <input id="clickeable" type="button" value="Hacé click">
 <script>
  var target = document.querySelector("#clickeable");
  target.addEventListener('click', mostrarMensaje);

   function mostrarMensaje(){
alert("Hola mensaje desde funcion!");
      }
   </script>

2 respuestas 2

2

Todos los browsers aceptan la asignación de onclick como propiedad inline, pero puedes gatillar un solo evento usando esa propiedad. Si usas en cambio target.addEventListener puedes añadir tantos listeners como quieras.

Si usas onclick y además addEventListener se gatillarán todos en secuencia.

También puedes sobreescribir la propiedad onclick haciendo target.onclick=mostrarMensaje.

function mostrarMensaje(msg){
  alert(msg);
}
function saluda(){
  alert('hola');
}
function despidete(){
  alert('hasta luego');
}

document.querySelector('#saluda').addEventListener('click', saluda);
document.querySelector('#saluda').addEventListener('click', despidete);

document.querySelector('#debiera').onclick=saluda;
<input id="clickeable" type="button" value="Muestra Mensaje"  onclick="mostrarMensaje('mensaje')"/>
 
 <input id="saluda" type="button" value="Mensaje, Saludo y Despedida"  onclick="mostrarMensaje('mensaje')"/>
 
  <input id="debiera" type="button" value="Saludo sobreescribe Mensaje"  onclick="mostrarMensaje('mensaje')"/>

El único inconveniente de addEventListener es que no está soportado en Explorer 8.

1

En realidad no hay diferencia en cuanto a funcionalidad se refiere, ambos hacen lo mismo, pero si es recomendable y ademas es una buena práctica, hacerlo por script, ya que en el momento que quieras cambiar el nombre a la funcion tienes que cambiarla en mínimo dos sitios, de otra forma desde el script cambias todo lo que necesites sin tocar html.

Sin mencionar que tienes que cargar la funcion del script antes de el html donde se encuentra la llamada onClick, lo ideal es tener todo el javscript al finalde la página y no repartido en medio del códio, simple organización.

Tu Respuesta

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

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