Generating unobtrusive JS

Question

I have read quite a bit about unobtrusive JS and how to generate it and all that jazz...

My problem is this: I have a website that heavily relies on mod_rewrite, so essentially all the pages requests are sent to index.php that generates the main structure of the page and then includes the appropriate page. Now, there are different sections in the site and each section uses different Javascript functions (e.g. for different AJAX requests).

Now, if I just were to attach a function to the onload of the page obviously the thing would not work, as I do not have to initialise the same things for each page... so what is the best way to handle this situation?

I hope the situation is clear, I'll be happy to clarify if needed

Answer 1

You can use addEventListener (standard) or attachEvent in the HTML generated by the subsidiary PHP pages.

The syntax is simple. E.g.

document.addEventListener("load", someFunction, false);

This allows you to generate the full body tag in index.php but run different load handlers for each page. Also note that you can use this multiple times on the same element.

Answer 2

Nico, I would suggest creating a custom javascript code with each included page (doesn't matter where on the page you include the script tag) and, as Matthew suggested, after you define a function to run on page load, use the addEventListener to load that custom function on "load"
Let's say you define a function pageinit() somewhere in the body of the included document

function pageinit(){..
}
window.addEventListener("load", function() { pageinit(); }, false); 

Does that make sense for your project?

Answer 3

I would simply put it in a .js file.

mysite_common.js - site wide common utils and functions

mysite_page_a.js - unique functionality for page a

mysite_page_b.js - unique functionality for page b

for page b you include b.js while on page a you would include a.js

Then in your respective unique.js you can wrap your functionality in a ondomready or similar.

Keep it separate from your PHP, then it is much less of an annoyance later, it also means that you can rely on caching for your js to keep your page loads slimmer.

You can also look at things like YUI loader which allows you to do much more complex things like ondemand loading of bits of js functionality.

You can use event delegation to provide different functionality depending on context.

Basically it works by attaching an event listener to a container element which captures clicks on child elements. You can then do away with individual event listeners alltogether, as well as look at hints from the parent. say:

<div id='container' class='page_a'>
...
    <input name='somename'>
...
</div>

Then

var attachDelegates = function(container){
    container.onclick = function(e) {
    e = e || window.event;
    var t = e.target || e.srcElement;

    //Your logic follows
    if(t.name === 'somename'){
         dosomething(t);
    }
    if(t.className === 'someclass'){
         ... something else ...
    }
};

and onload = function(){attachDelegates('container');};

The attachDelegates function could be different for each page, or you could have a monolithic one and simple attach hints to the container or be selective about which classes you attach.

These are much more coherent explanations and examples:
http://cherny.com/webdev/70/javascript-event-delegation-and-event-hanlders
http://blog.andyhume.net/event-delegation-without-javascript-library

Personally I use YUI3 http://developer.yahoo.com/yui/3/examples/node/node-evt-delegation.html

as it gives me CSS3 style selectors and is pretty hassle free so far.