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?

Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177
  • 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*. – Frédéric Hamidi Apr 03 '16 at 16:53
  • @FrédéricHamidi Yes, "considered" by whom ? Was there a poll done ? – guest271314 Apr 03 '16 at 16:54
  • 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. – Frédéric Hamidi Apr 03 '16 at 16:56
  • @FrédéricHamidi _"Everybody converged on their own minds I believe"_ This is not very conclusive ? _"Simple example: if my script is loaded after yours (and sometimes even before yours), it has free reign over your global handlers."_ Not certain gather example description correctly; can you create a stacksnippets or jsfiddle to demonstrate ? – guest271314 Apr 03 '16 at 16:59
  • 1
    1) Over time 2) by general consensus of the community given the changing nature of front-end design over the years. – Andy Apr 03 '16 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](http://jsfiddle.net/7nur47gq/) (it relies on hoisting, I could have assigned a function expression instead, the result would be the same). – Frédéric Hamidi Apr 03 '16 at 17:04
  • @Andy How is this substantiated ? Why is the phrase deferred to "considered" ? Instead of "I" ? Attempting to ascertain exactly when this determination was made ? And by whom ? – guest271314 Apr 03 '16 at 17:06
  • Why does it matter? If you don't agree with the consensus don't do it that way, but you'll be running against the grain of what has been mutually agreed upon _over the span of many years_ by tens of thousands of developers. – Andy Apr 03 '16 at 17:09
  • @FrédéricHamidi The same could occur using `.addEventListerner` http://jsfiddle.net/7nur47gq/1/ ? – guest271314 Apr 03 '16 at 17:10
  • @Andy _"but you'll be running against the grain of what has been mutually agreed upon over the span of many years by tens of thousands of developers."_ Where is the document representing the mutual agreement ? Or, for that matter, the list of voters that did not or do not agree ? – guest271314 Apr 03 '16 at 17:12
  • 1
    @guest, ah, but that's because your handler *is still global*. When using `addEventListener()`, one would either use an anonymous lambda or protect the handler in a local scope. – Frédéric Hamidi Apr 03 '16 at 17:14
  • 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. – Andy Apr 03 '16 at 17:15
  • @FrédéricHamidi Is `obj.original` global here http://jsfiddle.net/7nur47gq/2/ ? – guest271314 Apr 03 '16 at 17:16
  • 1
    @guest, of course it is (well, `obj` is and `original` is public). Are you seeing any scope around it? – Frédéric Hamidi Apr 03 '16 at 17:17
  • @FrédéricHamidi Was attempting to illustrate that there does not appear to be a difference between the two where the handler is adjusted to return an unexpected result – guest271314 Apr 03 '16 at 17:21
  • @Andy _"There isn't one."_ Does this mean that either approach is primarily opnion-based ? – guest271314 Apr 03 '16 at 17:22
  • 1
    @guest, did you get what I was saying about lambdas and local scopes? I don't think we're making progress here. – Frédéric Hamidi Apr 03 '16 at 17:22
  • @FrédéricHamidi No, not really. From perspective here, do not realize any differences; though could be incorrect and missing something vital to "progress", however that could be defined – guest271314 Apr 03 '16 at 17:23
  • @FrédéricHamidi Interesting that of the three current "close" votes, two cite "too broad" , one "primarily opinion-based". Is this the case ? Why would or could a user state "bad practice" where when seeking root of phrase one reaches "too broad" or "primarily opinion-based" ? – guest271314 Apr 03 '16 at 17:36
  • @guest271314, no. The "good practice" version is what people believe serves their needs better _based on the technology with which they're working_. – Andy Apr 03 '16 at 17:36
  • 1
    @guest, I wouldn't know. I haven't voted to close either way. Yet. – Frédéric Hamidi Apr 03 '16 at 17:37
  • @Andy _"is what people believe"_ Belief is very difficult to evaluate or place credence in. Beliefs often change – guest271314 Apr 03 '16 at 17:38
  • 1
    Which is why this question is too broad for SO and why I voted to close it. You should take this to the JS chatroom and natter about it there to your heart's content. – Andy Apr 03 '16 at 17:39
  • @Andy Why "too broad" ? Does this reflect that usage of event handler attributes is primarily opnion-based ? – guest271314 Apr 03 '16 at 17:40
  • @Andy Chat room or meta probably would not get appropriate answer. Have a sense that the actual answer as to whether an approach is "bad", "good" or "not bad" is opinion-based – guest271314 Apr 03 '16 at 17:41
  • 1
    You're not going to get one here either. – Andy Apr 03 '16 at 17:43
  • @FrédéricHamidi Scope references were helpful in reference to this answer http://stackoverflow.com/a/21638795/ – guest271314 Apr 03 '16 at 18:46

1 Answers1

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.

Peter Mortensen
  • 30,738
  • 21
  • 105
  • 131
arnorhs
  • 10,383
  • 2
  • 35
  • 38
  • _"The event handlers need to be global references"_ Is `obj.original` global http://jsfiddle.net/7nur47gq/2/ ? – guest271314 Apr 03 '16 at 17:17
  • 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 ;) – Frédéric Hamidi Apr 03 '16 at 17:21
  • 1
    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. – arnorhs Apr 03 '16 at 17:23
  • _try putting global handlers in your markup. I believe you'll get what authority means quite quickly ;)_ -- fair enough :) – arnorhs Apr 03 '16 at 17:24