HTML event attributes:
<button id="myButton" onclick="someFunction()">Click me</button>
jQuery event methods:
$('#myButton').click(function () { alert('Hello'); });
Which way is more appropriate and gives better performance?
Add a comment
|
2 Answers
Which way is better?
The latter, or any of the other modern ways of doing it (addEventListener, etc. — e.g., you don't need jQuery for this, although you can use it for this if you like). onxyz-attribute-style handlers are generally a poor choice because:
They can only call global functions. In general, you want to avoid having global functions.
They force you to mix your code and HTML, rather than keeping them distinct. (This could be considered subjective.)
Note that this doesn't mean you need to have an id on every element; you can use the full power of CSS selectors to find elements (with jQuery, or with querySelector/querySelectorAll) in order to hook them up, they don't have to have ids.
Do be sure that your code runs after the element is known to exist. Generally, the known best practice is to put your script tags at the end of the document, just prior to the closing </body> element; at that point, all elements defined by the HTML above the script will exist.
Comments
For performance the vanilla JS methods are better, however this is usally not significant. The loss in performance occurs because the JQuery library has to be loaded in order to execute the JQuery event methods. If you only are using JQuery very little you could consider replacing it with vanilla JS for performance.
Also in your first case you are mixin JS and html which is often bad we the amount of JS is growing because your files will be harder to read. Usually it is best practice to seperate concern (put JS/CSS in seperate files from html)
answered Feb 17, 2018 at 14:45
Willem van der Veen
37.1k19 gold badges208 silver badges178 bronze badges