As you put in the comments, there is no way that is better because it will depend on the context or even the user, but I'll put the differences between one and another, which is the best will depend on different factors:
- how many event handlers do you want to associate?
- how many times will these event handlers be associated?
- are you going to want to disassociate / reassociate those drivers later?
- what browsers do you want to support? ...
Here is a description of each one:
AddEventListener (with an anonymous function)
var clic = document.getElementById('out').addEventListener('mouseout',function(){
alert('Saliste del elemento');
})
The main advantage of this method is that will allow you to associate more than one action per event , that is, you can associate multiple functions with addEventListener and they will all be executed in the order in which who were associated.
An inconvenience comes when debugging ( debug ) the code if a failure occurs. If you have several anonymous functions associated with the event, in the error console you will only see that the error occurred in an unnamed function, but which one? You will need to go a little deeper in debugging to find the problem.
Another drawback (though minor) is that in older versions (and no longer supported) Internet Explorer addEventListener does not work and you should use attachEvent instead.
Example in which the two functions are executed, one of them fails but you do not see which one failed:
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 (with a nominal function)
var texto = document.getElementById('texto');
function miTexto(){
alert('estas en el texto');
}
texto.addEventListener('mouseover', miTexto);
This method is equivalent to the previous one. It is the same, only that instead of using an anonymous function, you are using a "normal" function that has a name and that you pass as a parameter to addEventListener .
An advantage over the previous one is that in case of error, in the error console you will see the name of the function where there are problems, which will facilitate the work of debugging.
Example in which the two functions are executed, one of them fails and you can see which one failed:
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>
Event attribute
var btn = document.getElementById('btn').onmousover= function(){
alert('Entraste en el elemento');
}
This method is more restrictive than the others, really what you are doing is assigning the event handler attribute ( onclick , onmouseover ...) of the label, which leaves a big inconvenience: it can only have a value That is, if you assign more than one function, only the last one will be executed.
Another drawback of using this method (especially if you do inline directly on the label) is that you can block the function for security reasons. For example, if you develop web applications with Cordova, this method will give you problems.
Example in which only the second function that is associated will be executed:
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>
That said, the method you use (you could also use jQuery or another JS library) will depend on the situation and the objective you want to achieve.