I'm curious about good practices in JavaScript. Examining the w3schools page and I found these three ways:
HTML :
<element onclick="myScript">
javascript
object.onclick = function(){ myScript };
addEventListener
object.addEventListener( "click", myScript);
being the latter, not compatible with IE 8 or earlier versions.
Which way of working is more convenient? Or does each one have its own advantages for certain aspects?
As you say, all three methods will work, but they differ in how they work and the support they have. Which way you should use or is more convenient will depend on your particular case, the needs of the project, the required support...
I am going to put an analysis/description/criticism of each of them and at the end my recommendation (and by the way I am going to add an additional method that is not mentioned in the question but that may be interesting).
Inline scripts:
<element onclick="myScript">
This would be the most direct way to add an event handler for an element: directly on the element itself. But I wouldn't recommend you to use it:
As I said at the beginning of the list, my recommendation would be that you do not use this method.
Assigning the event:
object.onclick = function(){ myScript };
This way is "similar" to the previous one, in the sense that you are assigning a value to
onclick
the element's attribute, but since it is executed on the JavaScript side, it will give you a bit more flexibility and freedom: you can use closures and functions anonymous, and you have more control over the environment and scope of the variables.But this method has a problem that should not be ignored: there can only be one attribute
onclick
. What does this mean? That if for any reason throughout your code you reassign theonclick
to an element, the value it had before is lost.For example, in the following code we assign two to the button
onclick
but only the last one is executed:My recommendation: if you are 100% sure that you are only going to define more than one
onclick
you could use this method with confidence.Event listener:
object.addEventListener( "click", myScript);
The main advantage of this method over the other two: it allows you to associate more than one event
click
to the element and they will be executed in the same order in which they were associated. In addition, and as in the previous method, it allows you to use closures, anonymous functions, references to functions, etc.For example, we assign two controllers to the following button
click
and both are executed:One problem, as you mentioned, is that this method does not work in versions of IE prior to 9 (in which the equivalent could be used
attachEvent
); but considering that support for all IE versions prior to 11 ended in January 2016 , unless you have to support them for some corporate reason, you should ignore this issue.This would be the method that, unless you have support restrictions, I would recommend you use.
Use libraries:
$(elemento).on("click", function() { myScript }
I know that this was not included in the three methods you put, but I think it could be interesting to add it as an alternative. JavaScript libraries will allow you to attach events to elements and will bypass some of the issues outlined above.
For example: with jQuery you can attach multiple handlers to the event
click
(as withaddEventListener
), but without the compatibility issuesaddEventListener
since the same code will work in all versions of IE.With the example of the previous button:
That's not to say that we should all use jQuery all the time: it has its good points and its bad points (a heavy new font would be added, but not much either) and adding it to a project just because it better abstracts event binding is overkill and not worth.