Немного предыстории, вчера задал вопрос по клику по классу на js.
https://qna.habr.com/q/1196250
Мой вопрос пометили "дублирующим". И я увидел и потом еще нашел несколько способов клику по классу на JS. И теперь возник вопрос, а какой из вариантов будет более производительнее?
Вот мой вариант
function initBtnCreateTest() {
const btn = document.getElementsByClassName("create");
for (var i = 0; i < btn.length; i++) {
var l = btn[i];
l.addEventListener('click', function () {
//code
})
}
Из аналогичного вопроса у видел еще такие примеры
document.addEventListener('click', function(e){
if (e.target.classList.contains('element')){
// your code
}
})
function foo(elem, eventType, selector, handler) {
elem.addEventListener(eventType, function(evt) {
if (evt.target.matches(selector)) {
handler(evt)
}
})
}
И нашел еще такой.
document.querySelectorAll('a').forEach(occurence => {
occurence.addEventListener('click', (e) => {
console.log('A link was clicked');
});
});
Вариантов несколько, но вопрос, какой из них будет производительнее и как это измерить. Я знаю, что есть performance у браузера, но как из него понять, какой из вариантов производительнее, не понимаю....