Unobtrusive Javascript Scripting

I was reading through some book about javascript best practices and i was lucky enough to hit the jackpot. It’s called “Unobtrusive Javascript Scripting“. As always, i appreciate it when i learn new stuff though i am a bit late. But as they say “better late than never” (that saying doesn’t apply to me when i get late 3 times in a row in my current job).

So what is it? Well, as far as i understood, (and you can do a wikipedia lookup for that) its basically a separation of the presentation and the logic of a web page. The logic would be of course the javascript and the presentation would be (doesn’t take a rocket scientist to guess) the HTML fragments of set of tags. But wait, if i separate the two, how can i have interaction between the HTML elements that triggers the events which is usually handled by the javascript code?

The usual

   <script language="javascript" type="text/javascript">
       function handleClick(){
          alert("You clicked the input button");
       }
   </script>
   <input type="button" onclick="handleClick();"/>

Unobtrusive Javascript Scripting

   <script language="javascript" type="text/javascript">
       function handleClick(){
          alert("You clicked the input button");
       }
       window.onload=function(){
             document.getElementById("btn")
                .addEventListener("click", handleClick, false);
       }
   </script>

   <input type="button" id="btn"/>

Syntax:

ElementTarget.addEventListener(type, listener, useCapture);

You can plainly see the difference. Using the unobtrusive practice, we can isolate the javascript related codes. Hence the term unobtrusive or “non interfering”. I guess the challenge to that approach when just implementing this kind or practice is the tracing of event handling. We are used to look into the element and look for the event handler and trace the name of the function in the javascript code somewhere. I am sure a little bit of javascript code documentation or inline commenting and grouping the parts that does all the event registering would be a good idea for a start. This way, we can easily trace the handlers and the actions without even scrolling down back and forth to the HTML and the javascript area of your code. Unless you’re using a very good javascript IDE like APTANA this one doesn’t pose to be a problem at all.

BTW, theres more to just adding event handler at runtime. We can also do purging of registered event handlers to an element. Also make sure that the browser has already mapped the HTML codes to a DOM tree before you add event handlers. This can be achieved using the window.onload function that triggers when all the page has been loaded and mapped. To make it simple, you cannot add events listeners to a non existing element or a DOM object.