如何在纯JS中为动态创建的元素定义事件？

Question

How to catch elements onclick event when element may be created in future or added dynamically?

// Here i need to define function for click
// In jQuery it would be like this: jQuery('body').on('click', 'a.some-link-class', function(){});

var some_link = document.createElement('a');
    some_link.class = 'some-link-class';
    some_link.href = '#';

var some_link_text = document.createTextNode('Some Link Title');
    some_link.appendChild(some_link_text);

document.body.appendChild(some_link);

Answer 1

You must use event delegation for JS. just attach an event to a parent item or document and check in the parent if trigger is your element. You can use a class name or tag name etc.

// Get the element, add a click listener...
document.getElementById("parent-list").addEventListener("click",function(e) {
    // e.target is the clicked element!
    // If it was a list item
    if(e.target && e.target.nodeName == "LI") {
        // List item found!  Output the ID!
        console.log("List item ",e.target.id.replace("post-")," was clicked!");
    }
});

in this way the event also works for elements what will be added afterwards.

Answer 2

You can attach an event to the body and test if the source of the event is the control type you want, or a class, or something else.

//attach the event to everything in the body
document.body.addEventListener('click', eventFunction, false);

//event function
function eventFunction(e)
{
   //test if the source triggering the event is an element from the class you want
   //you can do the test on the class, tagname... anything you desire
   if(e.ClassName.match('myclass'))
   {
      //do something if the class matches
      dosomething();
   }
}

With this, you can create any element you want after that. If they have the good class they will trigger the event if clicked and the function will run.

Answer 3

Just attach it when you create it:

some_link.onclick = function() {
    //do stuff
}

Answer 4

Either

some_link.addEventListener('click', handler);

or

some_link.onclick = handler;