Help me to understand basic priciples of Unobtrusive JavaScript

Question

I found these basic principles of Unobtrusive JavaScript from Wikipeia/Unobtrusive_JavaScript:

Separation of functionality (the "behavior layer") from a Web page's structure/content and presentation
Best practices to avoid the problems of traditional JavaScript programming (such as browser inconsistencies and lack of scalability)
Progressive enhancement to support user agents that may not support advanced JavaScript functionality

I can understand first one easily. I also can understand second one's avoid the problems of lack of scalability. I wonder how Unobtrusive JavaScript can help to avoid browser inconsistencies. On the contrary, sometimes Obtrusive way can help to avoid browser inconsistencies. For example, to add event to some element I should do this in Unobtrusive way:

<div id="button">Button</div>
<script>
var button = document.getElementById('button');

function buttonClick() {
  // do something
}

if (button.addEventListener) 
  button.addEventListener('click', buttonClick, false);
else
  button.attachEvent('onclick', buttonClick);
</script>

if I do it Obtrusive way:

<div id="button" onclick="buttonClick()">Button</div>
<script>
function buttonClick() {
  // do something
}
</script>

As you can see Obtrusive way is simpler and not needed to care about browser inconsistency. So could you explain or show me any examples how Unobtrusive way can help to avoid browser inconsistencies.

And third one. I can do progressive enhancement in Obtrusive way. For example, I can still use Modernizr in Obtrusive way.

How can Unobtrusive JavaScript help to do these?

possible duplicate of [Why is using onClick() in HTML a bad practice?](http://stackoverflow.com/questions/5871640/why-is-using-onclick-in-html-a-bad-practice) — Rich Bradshaw, Aug 14 '11 at 07:36
@Rich That doesn't give the answer of my questions. Those are just what I already know. Where are explains about `browser inconsistencies` thing or `advanced JavaScript functionality` thing? — Sanghyun Lee, Aug 14 '11 at 07:48
It explains why "As you can see Obtrusive way is simpler and not needed to care about browser inconsistency" is a false statement, but an easy incorrect observation for a newcomer to make. Wikipedia's articles are very poorly written, I wouldn't go there to learn JavaScript. — Andy Ray, Aug 14 '11 at 08:05
@Andy I don't think Unobtrusive JavaScript is bad. That was just example to explain some case. And, I didn't know that Wikipedia's articles are poorly written. If that is really true, now I can understand. — Sanghyun Lee, Aug 14 '11 at 08:12
I am the first one to tell people that jQuery is not always the answer, but in this particular case it is. Event handling like you have above lends itself marvellously to using a framework where you do not need to know if it is addEventListener or attachEvent. In jQuery it is simply $("#button").click(...) or $("#button").bind("click",...) — mplungjan, Aug 14 '11 at 08:23
@mplungjan Yes, it is. In conclusion then, Obtrusive Javascript and jQuery can help to avoid browser inconsistencies. And this is different from Wikipedia. Maybe Wikipedia says wrong things. — Sanghyun Lee, Aug 14 '11 at 08:47

score 1 · Answer 1 · answered Oct 31 '13 at 07:45

1

you can use HTML properties, like Arash say, but it's not W3c Valid. If you will pass the W3c validation, it's better to use Javascript

answered Oct 31 '13 at 07:45

mortiped

869
1
6
28

Sebastien C. · Answer 2 · 2013-10-31T08:42:47.830

I generally prefer to use simple and precise polyfills. For your example, you could just include addEventListener polyfill (https://gist.github.com/eirikbacker/2864711) and then use a standard way :

<div id="button">Button</div>
<script type="text/javascript" src="./polyfills/addEventListener-polyfill.js"></script>
<script>
    var button = document.getElementById('button');

    function buttonClick() {
        // do something
    }

    button.addEventListener('click', buttonClick, false);
</script>

score 1 · Answer 3 · answered Aug 14 '11 at 07:52

1

Well, what you say is true, but there are some other HTML properties that are not that standard. for example stuff like

<input disabled>

or

<input disabled="disabled">

can be handled in unobtrusive javascript more consistently.

answered Aug 14 '11 at 07:52

arashka

1,226
3
17
30

Help me to understand basic priciples of Unobtrusive JavaScript

3 Answers3