Использовать HTML-атрибут javascript «onSOMETHING» или добавить прослушиватель событий в сценарии для всех элементов одновременно?

Question

Что ж, я использую скрипт, который получает внешний JSON из файла, перебирает его объекты и создает HTML-код в строке, а после того, как все сделано, он добавляется в DOM. Но я хотел бы знать, лучше ли использовать, например, атрибут html onclick (непосредственно в коде) или добавить прослушиватель событий для всех html-объектов сразу по его классам с помощью Javascript после добавления в DOM.

Это та же скорость или одна быстрее, чем другая, и почему? Я использую много HTML-объектов, поэтому мне действительно нужно это знать, чтобы добиться максимальной производительности. Благодарю. :)

Answer 1

Я бы предложил использовать простое делегирование событий :

// 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
    }
}

Answer 2

Лично я всегда использую ненавязчивый JavaScript. Я помещаю все сценарии в отдельные файлы js, и все события подключаются в этих сценариях. Таким образом, я больше не смешиваю разметку и скрипт и уменьшаю размер разметки. Это ограничивает потребление пропускной способности. А поскольку файлы javascript кэшируются клиентскими браузерами, это повышает производительность веб-сайта.