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.
btn
no es el elemento devuelto pordocument.getElementById('btn')
, sino la función que has asignado aonmouseover
. Haz untypeof btn
y verás que esfunction
. 2) Igualmente,click
valdrá lo que sea que devuelvaaddEventListener()
. 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.