2

Hola me ando iniciando en el mundo de la programación en especifico JavaScript, y tengo una duda, estoy aprendiendo sobre eventos(onclick, onmouseover, etc).

Y mi duda radica en que he visto que muchos utilizan los eventos de diferentes maneras, vamos los escriben en sus diferentes formas en las cuales se pueden expresar para que estos se ejecuten. Quiero saber en base a su experiencia cual es la forma correcta de redactarlos o en su caso la mas recomendable, les dejo 3 ejemplos:

//Aquí escucho el evento poniendo todo junto
var clic = document.getElementById('out').addEventListener('mouseout',function(){
    alert('Saliste del elemento');
})

//Aquí hago uso directamente del evento sin usar el addEventListener
var btn = document.getElementById('btn').onmousover= function(){
    alert('Entraste en el elemento');
}

//Aquí desgloso todo, la variable que invoca a un id que se encuentra en el documento html, hago una función y después la invoco con el método addEventListener pero de forma separada a todo lo demás.
var texto = document.getElementById('texto');

function miTexto(){
    alert('estas en el texto');
}
texto.addEventListener('mouseover', miTexto);

¿cual creen que sea la mas correcta de usar y mas a la hora de escribir cientos de lineas de código?

3
  • 5
    Hola CACZ, bienvenid@. Las preguntas deberían ser objetivas, asi que te sugiero reformular las expresiones como "cual es la mejor" ya que todo depende del contexto o incluso de cada usuario. Un saludo
    – lois6b
    Commented el 10 abr. 2017 a las 14:35
  • En un principio, viendo que estas empezando te recomendaria usar la que mas sencilla te parezca a la hora de programar. Al fin y al cabo de una manera o de otra hacen lo mismo. Commented el 10 abr. 2017 a las 14:45
  • Ten en cuenta que: 1) btn no es el elemento devuelto por document.getElementById('btn'), sino la función que has asignado a onmouseover. Haz un typeof btn y verás que es function. 2) Igualmente, click valdrá lo que sea que devuelva addEventListener(). 3) La version de "texto" es básicamente igual que la de "click", pero a veces la función que maneja el evento ha sido declarada en otra parte y tendrás que usar este método. 4) Con "btn", tu función reemplaza a la función anterior, si la había; mientras que con los otros métodos se ejecutan una detrás de la otra. Commented el 10 abr. 2017 a las 15:15

3 respuestas 3

3

Como te ponen en los comentarios, no existe una manera que sea mejor porque va a depender del contexto o incluso del usuario, pero te voy a poner las diferencias que hay entre uno y otro, cuál es el mejor va a depender de diferentes factores:

  • ¿cuántos controladores de eventos quieres asociar?
  • ¿cuántas veces se va asociar esos controladores de eventos?
  • ¿vas a querer desasociar/reasociar esos controladores más adelante?
  • ¿qué navegadores quieres soportar?...

Aquí te dejo una descripción de cada uno:

AddEventListener (con una función anónima)

var clic = document.getElementById('out').addEventListener('mouseout',function(){
    alert('Saliste del elemento');
})

La principal ventaja de este método es que te va a permitir asociar más de una acción por evento, es decir, puedes asociar múltiples funciones con addEventListener y se ejecutarán todas en el orden en el que se asociaron.

Un inconveniente viene a la hora de depurar (debug) el código si ocurre un fallo. Si tienes varias funciones anónimas asociadas al evento, en la consola de errores sólo vas a ver que el error ocurrió en una función sin nombre, ¿pero cuál de ellas? Vas a necesitar profundizar un poco más en la depuración para encontrar el problema.

Otro inconveniente (aunque menor) es que en versiones antiguas (y ya no soportadas) de Internet Explorer addEventListener no funciona y deberías usar attachEvent en su lugar.

Ejemplo en el que se ejecutan las dos funciones, una de ellas falla pero no ves cuál es la que falló:

document.getElementById("btn").addEventListener("click", function() {
	console.log("funcion 1");
  funcionError();
});

document.getElementById("btn").addEventListener("click", function() {
	console.log("funcion 2");
});
<button id="btn">Mi botón</button>


AddEventListener (con una función nominal)

var texto = document.getElementById('texto');

function miTexto(){
    alert('estas en el texto');
}
texto.addEventListener('mouseover', miTexto);

Este método es equivalente al anterior. Es el mismo, sólo que en lugar de usar una función anónima, estás usando una función "normal" que tiene nombre y que pasas como parámetro al addEventListener.

Una ventaja sobre el anterior es que en caso de error, en la consola de errores vas a ver el nombre de la función donde hay problemas, lo que va a facilitar la labor de depuración.

Ejemplo en el que se ejecutan las dos funciones, una de ellas falla y puedes vers cuál es la que falló:

function miFuncion1() {
	console.log("funcion 1");
  funcionError();
}

function miFuncion2() {
	console.log("funcion 2");
}

document.getElementById("btn").addEventListener("click", miFuncion1);
document.getElementById("btn").addEventListener("click", miFuncion2);
<button id="btn">Mi botón</button>


Atributo de evento

var btn = document.getElementById('btn').onmousover= function(){
    alert('Entraste en el elemento');
}

Este método es más restrictivo que los otros, realmente lo que estás haciendo es asignar el atributo de controlador de evento (onclick, onmouseover...) de la etiqueta, lo que deja un gran inconveniente: sólo puede tener un valor. Es decir, si asignas más de una función, sólo se ejecutará la última.

Otro inconveniente de usar este método (especialmente si lo haces inline directamente en la etiqueta) es que se puede bloquear la función por motivos de seguridad. Por ejemplo, si desarrollas aplicaciones web con Cordova, este método te va a dar problemas.

Ejemplo en el que sólo se ejecutará la segunda función que se asocia:

document.getElementById("btn").onclick = function() {
  console.log("funcion 1");
}

document.getElementById("btn").onclick = function() {
  console.log("funcion 2");
}
<button id="btn">Mi botón</button>


Lo dicho, el método que utilices (podrías también usar jQuery u otra librería JS) va a depender de la situación y el objetivo que quieras obtener.

1
  • Muchas gracias por tu tiempo se nota la experiencia y eso me da una idea clara hacia donde debo de ir y que no todo es meter código a lo loco si no entender las necesidades del programa mismo y hacerlos de la mejor manera para que después no haya tanto problema con los errores entre mas claro sea mucho mejor. Saludos y gracias.
    – CACZ
    Commented el 25 abr. 2017 a las 16:58
0

La pregunta es muy a criterio personal, así que respondo desde mi propio punto de vista:

Si puedes colocar el evento directamente al elemento será mejor, ya que no incluyes procesamiento adicional.

Me explico: Suponiendo que tienes un botón (button o input) y quieres asociarle un evento, simplemente colócalo en la descripción del mismo:

<button id="btn" onclick="miFuncion()">Presiona!</button>

<script>
    miFuncion = function(){
        alert("¡Hola mundo!");
    }
</script>

Esto lo hago porque me ha tocado lidiar con funciones que nunca son llamadas por x o y razón si lo hago programáticamente, así que lo prefiero así.

Por otro lado, incluso podrías preguntar cuál notación es mejor, si hacerlo por miFuncion = function(){...} o function miFuncion(){...}; el lenguaje es muy extenso como cualquier otro, hay muchos criterios personales que definen cómo cada quién escribirá su código y por lo tanto solo te queda leer sobre el lenguaje, entender la programación hacer tus propios experimentos y encontrar la manera que mejor te acomode.

2
  • Hola te doy toda la razón en cuanto a lo que dices que las funciones a veces no se ejecutan quien sabe porque, y he tomado como solución lo que tu comentas de invocarlas directamente desde el elemento y funciona y no me complico tanto. Saludos
    – CACZ
    Commented el 25 abr. 2017 a las 17:05
  • Incluso la librería React te obliga a hacerlo así. Saludos! Commented el 25 abr. 2017 a las 20:14
-1

Ya que te estas iniciando te recomiendo uses jQuery ecribes menos y desarrollas mas!!.. ;))

Aqui te dejo un ejemlo de como manejar los eventos con jQuery:

$(document).ready(function () {
 $("#Event").on("mouseover",function () {
  console.log("on mouse Over!!");
 });
 $("#Event").on("mouseout",function () {
  console.log("on mouse Out!!");
 });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="Event">Hello!</div>

7
  • 2
    De hecho, es un muy mal consejo. Lo mejor que puedes hacer cuando inicias con un lenguaje es entender cómo funciona, incluso a nivel interno. Recomendar un framework sin antes entender cómo funciona el lenguaje, solo traerá confusión e ignorancia, limitándote en el uso del lenguaje y dependiendo siempre de terceros para poder realizar algo productivo. A todo el que lea ésta respuesta, por su propio bien, NO lo haga.
    – gugadev
    Commented el 10 abr. 2017 a las 15:42
  • @GustavoGarcía, tal vez no entendiste la pregunta Cual es la mejor forma? mi interpretación es que lo quiere hacer de la mejor manera desde un principio y la mejor forma no solo de manejar los eventos sino el DOM html en su totalidad es con jQuery. mi experiencia como programador en la web es mas de 25 años y créeme cuanto habría querido que hubiese existido jQuery en aquella época, es mas pregúntate por que nació jQuery?, es mas fíjate en lo que dices en tu perfil, desarrollas con los mejores framework? pero no quieres que los demas los usen, que verguenza..
    – fwBasic
    Commented el 10 abr. 2017 a las 16:04
  • Como todo librería/framework, nació para dar solución a un conjunto específico de problemas. Cuando dices: "a mejor forma no solo de manejar los eventos sino el DOM html en su totalidad es con jQuery", supongo te refieres en términos de productividad, porque en términos de rendimiento, no es ni de lejos la mejor manera. No me malinterpretes, no estoy poniendo en duda tu capacidad, jamás me atrevería con semejante experiencia; es simplemente que, literalmente, tal y como lo has puesto, es un mal consejo para los iniciados ;).
    – gugadev
    Commented el 10 abr. 2017 a las 16:13
  • Como veras mi respuesta no es mas que otra forma de manejar los eventos, ademas de que es una recomendación (que tal vez CACZ no conoce por el mismo hecho de estar iniciandose), es por ello que considere necesario colocarla. A veces la gente comenta mucho pero no da soluciones, y creo que todos estamos aquí para eso, para brindar soluciones mas que simplemente hacer comentario, que en algunos caso mas que ayudar entorpecen el desarrollo del foro, mi recomendación a todos... no se dejen llevar por las emociones.
    – fwBasic
    Commented el 10 abr. 2017 a las 16:41
  • "desarrollas con los mejores framework? pero no quieres que los demas los usen, que verguenza - mi recomendación a todos... no se dejen llevar por las emociones - A veces la gente comenta mucho pero no da soluciones, y creo que todos estamos aquí para eso - en algunos caso mas que ayudar entorpecen el desarrollo del foro". Bueno, paso de esta discusión porque se ha vuelto personal y estoy aquí objetivamente. Saludos.
    – gugadev
    Commented el 10 abr. 2017 a las 17:21

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