Question

I once read that the following coding technique is considered bad:

<a HREF="page.htm" onClick="alert('Hello World')">text link</a>

Basically, having these event handlers (like onClick) within the HTML tag is the wrong approach to use. What is the reason for this? What is this "bad" technique called? What is the "proper" way to do this?

Answer 1

This is an inline event handler attribute. (+1 chjj’s answer for alternatives). It’s generally considered ‘bad’ for a number of reasons:

• you’re mixing small pieces of JavaScript syntax inline with HTML syntax:

  • when you have lots of these, especially when you have lots of elements that all contain essentially the same bit of code, it’s harder to read and maintain the code;

  • you get nested-escaping horrors when you need to use special-to-HTML characters in your code:

eg.:

<a href="x.html" onclick="this.innerHTML= '&lt;em>I like &quot;fish &amp;amp; chips&quot;&lt;/em>';">

• properties of the target element and all ancestor nodes become variables, potentially hiding your own variables of the same name. See this question for background on this surprising and almost always unwanted behaviour;

  • this introduces spooky incompatibilities as browsers have different DOM properties;

  • and future browsers introducing new properties will potentially break your code.