Question

Well I use a script that get a external JSON from a file, and loop thru its objects and creates the HTML on a string then after all is done, it appends in the DOM. But I would like to know if it’s better to use for example: onclick html attribute (directly into the code) or add an event listener to all html objects by its classes at once with JavaScript after appending to the DOM.

Is it the same speed or one is faster than the other and why?
I use a lot of HTML objects so I really need to know that, to get the best performance of it.

Answer 1

I would suggest using some simple event delegation:

// works on existing and future elements
// since we are attaching to the parent
var d = document;
d.getElementById("theParentOfAppendedElements").onclick = function (e) {
    if(e.target.tagName.toLowerCase() === "something" 
        && e.target.className === "appended") {
        // do something
    }
}