add event listener on elements created dynamically

Question

Is possible to add event listener (Javascript) to all dynamically generated elements? I'm not the owner of the page, so I cannot add a listener in a static way.

For all the elements created when the page loaded I use:

doc.body.addEventListener('click', function(e){ //my code },true); 

I need a method to call this code when new elements appear on the page, but I cannot use jQuery (delegate, on, etc cannot work in my project). How can I do this?

Answer 1

It sounds like you need to pursue a delegation strategy without falling back to a library. I've posted some sample code in a Fiddle here: http://jsfiddle.net/founddrama/ggMUn/

The gist of it is to use the target on the event object to look for the elements you're interested in, and respond accordingly. Something like:

document.querySelector('body').addEventListener('click', function(event) {   if (event.target.tagName.toLowerCase() === 'li') {     // do your action on your 'li' or whatever it is you're listening for   } }); 

CAVEATS! The example Fiddle only includes code for the standards-compliant browsers (i.e., IE9+, and pretty much every version of everyone else) If you need to support "old IE's" attachEvent, then you'll want to also provide your own custom wrapper around the proper native functions. (There are lots of good discussions out there about this; I like the solution Nicholas Zakas provides in his book Professional JavaScript for Web Developers.)

Answer 2

Depends on how you add new elements.

If you add using createElement, you can try this:

var btn = document.createElement("button"); btn.addEventListener('click', masterEventHandler, false); document.body.appendChild(btn); 

Then you can use masterEventHandler() to handle all clicks.