add event listener on elements created dynamically

javascript addeventlistener dom-events intercept
jenjis picture jenjis · Jan 10, 2013 · Viewed 81k times · Source

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

founddrama picture founddrama · Jan 10, 2013

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.)

Related questions

How to trigger event in JavaScript?

I have attached an event to a text box using addEventListener. It works fine. My problem arose when I wanted to trigger the event programmatically from another function. How can I do it?

Read More
How to check whether dynamically attached event listener exists or not?

Here is my problem: is it possible somehow to check for existence of dynamically attached event listener? Or how can I check the status of the "onclick" (?) property in DOM? I have searched internet just like Stack Overflow for a …

Read More
How do I add and remove an event listener using a function with parameters?

Sorry if this is a common question, but I couldn't find any answers that seemed pertinent through searching. If I attach an event listener like this: window.addEventListener('scroll', function() { check_pos(box); }, false); it doesn't seem to work to …

Read More