I have heard many times that using JavaScript events, such as onClick() , in HTML is a bad practice, because it's not good for semantics. I would like to know what the downsides are and how to fix the following code?
<a href="#" onclick="popup('/map/', 300, 300, 'map'); return false;">link</a>
Source: Tips4all
It's not good for several reasons:
ReplyDeleteit mixes code and markup
code written this way goes through eval
and runs in the global scope
The simplest thing would be to add a name attribute to your <a> element, then you could do:
document.myelement.onclick = function() {
window.popup('/map/', 300, 300, 'map');
return false;
};
although modern best practise would be to use an id instead of a name, and use addEventListener() instead of using onclick since that allows you to bind multiple functions to a single event.
It's a new paradigm called "Unobtrusive JavaScript". The current "web standard" says to separate functionality and presentation.
ReplyDeleteIt's not really a "bad practice", it's just that most new standards want you to use event listeners instead of in-lining JavaScript.
Also, this may just be a personal thing, but I think it's much easier to read when you use event listeners, especially if you have more than 1 JavaScript statement you want to run.
Your question will trigger discussion I suppose. The general idea is that it's good to separate behavior and structure. Furthermore, afaik, an inline click handler has to be evalled to 'become' a real javascript function. And it's pretty old fashioned, allbeit that that's a pretty shaky argument. Ah, well, read some about it @quirksmode.org
ReplyDelete