0

Related: Why is using onClick() in HTML a bad practice?. See also Unobtrusive JavaScript.

Unobtrusive JavaScript is a general approach to the use of JavaScript in web pages. Though the term is not formally defined (emphasis added)

Questions:

  1. At what point was the determination made that using onclick or other global event handler attributes within html was "considered" a "bad practice"?
  2. By whom was the determination made that using global event handler attributes within html was a "bad practice"?
  3. If the user who drafts the html and includes global event handler attributes within the html is aware of the event handler attributes' presence within the html, how could this be "considered" "bad practice"?

  4. Should a composer of html not ever include an event handler attribute within html?

  5. Are there any cases where including event handler attributes within html would not be "considered" a "bad practice"?

  6. Exactly whose "consideration" of a practice should the composer of the html, javascript defer to? That is, what is the reference point for a composer to review whether a particular practice is currently "considered" "bad", "not bad" or "good"? Or, is there a list which tallies all "considerations" of those that "consider" the many possible practices which could be implemented within html, javascript?

For clarification, attempting to ascertain exactly when, and by whom, the term or phrase "bad practice" or "considered bad practice" was attached to the usage of global event handlers within html? And what is the official or pseudo-official document or set of documents which list the votes of those that participated in the "consideration" process that leads to a "bad" or "good" designation?

Or, is the term "considered bad practice" primarily opinion-based?

Improve this question
27
  • 2
    Global handlers within markup are considered a bad practice because they're global. Anything global is bad practice, especially in the JavaScript ecosystem. We used those before because we didn't have any alternative at that time. Commented Apr 3, 2016 at 16:53
  • 1
    Everybody converged on their own minds I believe -- in other words, they're really a bad practice (considered is a weasel word). Simple example: if my script is loaded after yours (and sometimes even before yours), it has free reign over your global handlers. Commented Apr 3, 2016 at 16:56
  • 1
    1) Over time 2) by general consensus of the community given the changing nature of front-end design over the years. Commented Apr 3, 2016 at 17:02
  • 1
    Ah, delightful burden of proof :) Okay, you don't have to take my words as face value, here's a fiddle to prove it (it relies on hoisting, I could have assigned a function expression instead, the result would be the same). Commented Apr 3, 2016 at 17:04
  • 2
    There isn't one. There's years of people trying different ways of working (some documented). Some ways are better than others and people gravitate towards those methods of working. It can be best described as an evolution of development practises. Evolution doesn't have a roadmap, some things work, others don't. Those that work, win. Commented Apr 3, 2016 at 17:15

1 Answer 1

Reset to default
2

First off, it is considered bad practice by "the community" -- the collective intelligence of average JavaScript developers.

Bad practice, by definition, is not something that's a rule that's decided by anybody, just like you can be bad at naming functions or have too long functions or using global variables all over the place, you can have your JavaScript event handlers assigned in HTML.

There was no poll and no W3C decision made. It's simply a result of many people's experience with them.

The main reasons, in my opinion are:

  • The event handlers need to be global references, so everything that's bad about global variables in general applies to them.
  • It's not very obvious where your global function is being used if you're only looking at the JavaScript code
  • People generally prefer to keep their HTML clean of JavaScript and leaving their event handling completely in JavaScript land.
  • Keeping the event handling assignment in JavaScript makes it so you don't have to change the markup to update your JavaScript code.
  • If you have a lot of them around, it can get pretty repetitive. For example, when assigning the same event handler to every row in a table.
  • You can't do all your event assignment in HTML, so you inevitably will have some in HTML and some in JavaScript land, which makes it feel extra messy.

However, there's a lot of dogma, and generally when there's a new way to do things the sheep herd will generally just run around in the same direction eschewing any other opinions. You'll hear a lot of people saying it's bad without them necessarily knowing why it's bad or knowing how to explain why they're bad.

So, being completely pragmatic about it, if you have a simple application and you just need to assign a single event handler, etc., it's your choice.

So IMO there's nothing wrong with it, and if you and the people you're working with like doing it that way, by all means, go ahead.

But yes, it's considered bad practice by the average JavaScript developer. With no authority.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

"The event handlers need to be global references" Is obj.original global jsfiddle.net/7nur47gq/2 ?
By the average javascript developer. With no authority. Heh. Can you try a little experiment? For your next code review, try putting global handlers in your markup, and insist in leaving them there. I believe you'll get what authority means quite quickly ;)
I don't know if you're ready to hear this, but that's a globally accessibly reference. It may be name-spaced, but it's still globally accessibly. These days javascript developers prefer to have their code not accessibly from the global scope at all. One of the reasons being that you will be able to minify the code way more efficiently.
try putting global handlers in your markup. I believe you'll get what authority means quite quickly ;) -- fair enough :)

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.