Unobtrusive JavaScript
Part 2 : Unobtrusive DOM Access
Join the Discussion
More of this Feature
The main thing you need to remember when adding unobtrusinve JavaScript to a web page is that you can't add javaScript to a tag in your HTML until after that tag has actually loaded into the page. There are two ways of ensuring that the tag has been loaded before adding the JavaScript to it.
The first way is to use the window.onload event to trigger the JavaScript so that none of the JavaScript runs until after the browser triggers the event that indicates that it has finished loading the page. The disadvantage of using this way is that none of the JavaScript in the web page will be available to start running until after the entire page has loaded.
The alternative way of adding the JavaScript dynamically to the tags in your page is to set up a function to test if the tag with the appropriate id exists. If it does then you run the appropriate code to add the JavaScript to it. If it doesn't then you can use a setTimeout to call the test again after a short delay to again test if it has loaded yet. This way you will have the JavaScript added to the HTML unobtrusively as soon as possible after the tag it is being attached to has loaded and hence it will work as soon as that part of the page is visible just as if it were embedded into the HTML itself. We can also set up processing on the window.onload event handler to cancel any outstanding testing since if any tag has not been found by the time the page has finished loading then that tag is obviously not in the current web page and we don't want the code to continue testinng forever for a tag that doesn't exist.
Faster DOM Access provides the code needed to set up this alternative processessing such that you can just call a function loaded() passing it the id of the tag that you want to test for and the name of the function that you want to run when that tag is found.
The function that is called once the tag exists is the one that will add the JavaScript code to the tag for you. For event handlers that you want to add unobtrusively to your HTML you can simply set up a simple function similar to the following to create all of the event hhandlers that you removed from the original HTML and replaced with the id.
var d = document.getElementById('theID');
d.onclick = function() {d.value = '0';}
}
Simply give each function its own unique name in place of addEventHandlers and reference the id that you gave the tag in place of theID.
You can add as many event handlers as you had in the original HTML via the JavaScript just by duplicating the statement assigning a function to the event handler. Simply replace onclick with whatever event handler you want to add. Whatever code you had in the original event handler in the HTML goes in the function where my example has d.value = '0';.
With a function liike this in place for each of the tags where you had event handlers in the original HTML you now have an unobtrusive JavaScript equivalent to having all of those JavaScript event handlers embedded in the HTML.
This is the simplest way of directly converting the embedded JavaScript event handlers into an unobtrusive version of the same event handlers without having to redesign your code any more than necessary. If you want to rewrite your entire script to be even more flexible then you should look into replacing the event handlers with event listeners.
