dynamically add event listeners

Question

I've a Web site with hundreds of html pages that are already deployed. Now I want to add event listeners to body such as onload and onunload in all the html pages. I don't want to manually change each of every of them, so I'm thinking whether I could dynamically add these listeners. My idea is to write javascript code that finds the DOM node of body and add the listeners to this node. Would it be possible? (it doesn't have to be a cross-browser solution. the code is going to run on Firefox.)

Thanks! Paul

Answer 1

If you want to add JavaScript you'll end up needing to modify the site one way or another.

Possibly you'll be doing a global search and replace and look for:

</head>

And change it to

<script type="text/javascript" src="/global.js"></script>
</head>

Then at the root of your site create a file called global.js and put this in it:

window.onload = function() {
   // onload code here
}

window.onunload = function() {
   // onunload code here
}

What kind of things are you trying to do? The suggestion for jQuery or another library is a good one if you're adding lots of event handlers, but if you merely need to add a few chunks of JS perhaps a library is overkill.

Answer 2

Yeah, easy.. but how are you going to get the javascript in there? If you're already loading a single javascript library in all pages that allows you to hook in your method, you can use

window.onload = function() {};

and

window.onunload = function() {};

.. but if you have the option, I'd seriously suggest using a library like jQuery that hides all this muck from you.

---

Paul asked for clarification. Here's example code:

var hi = function() {
  alert('hi there.');
};

var bye = function() {
  alert('bye!');
};

if(window.addEventListener) {
  window.addEventListener('load', hi, false);
  window.addEventListener('unload', bye, false);
} else if(window.attachEvent) {
  window.attachEvent('load', hi);
  window.attachEvent('unload', bye);
}

Answer 3

There are 2 solutions for this:

1. You can use jQuery ready event
2. Or you can use window.onload

Answer 4

Well, you could do one of these four things:

• Use some scripting language like PHP, Python or ASP.Net to build a frontend to these pages, which adds in required code
• Use tools like grep and sed to do a replace-all
• Load mentioned pages in a frame , from a central 'Home page' and use DOM Manipulation to add said event listeners (although I believe this will not be possible for body.onLoad)
• If all the pages already load some javascript, simply toss your even listener in there.

Answer 5

The normal way to add an event in firefox is obj.addEventListener( type, fn, false ). So the only thing to do is :

window.addEventListener('load', yourFunction, false );

There is no reason to use jquery for this.

Answer 6

Since you only need this to work in Firefox, the DOMContentLoaded event (which means the HTML is loaded, not including images) should be listened to

document.addEventListener("DOMContentLoaded", function () {
    // your code here; document.body is available
}, false);