Sunday, April 8, 2012

Why is using onClick() in HTML a bad practice?

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


  1. It's not good for several reasons:

    it 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.

  2. It's a new paradigm called "Unobtrusive JavaScript". The current "web standard" says to separate functionality and presentation.

    It'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.

  3. 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