Why event delegation in Javascript is faster from normal child event?

Question

Why number one code, is a normal child event listener code in js is slower than number 2 code, number two is event delegation in js.

// #1
navLink.forEach(function (item) {
item.addEventListener('click', function (e) {
 e.preventDefault();
 const navId = item.getAttribute('href');
 const navEl = document.querySelector(navId);
 navEl.scrollIntoView({ behavior: 'smooth' });
});
});


// #2
navLinks.addEventListener('click', function (e) {
e.preventDefault();

// matching strategy
if (e.target.classList.contains('nav__link')) {
const navId = e.target.getAttribute('href');
const navEl = document.querySelector(navId);
navEl.scrollIntoView({ behavior: 'smooth' });
 }
});

They don’t do the same amount of work. #1 creates several functions, #2 creates only one. See [Which is faster?](//ericlippert.com/2012/12/17/performance-rant/). — Sebastian Simon, Oct 21 '21 at 14:34
What exactly you say is slower? Attaching the event handlers? Executing the event handler? How did you measure the time? — trincot, Oct 21 '21 at 14:35
Interesting question. My guess is that you're only adding one event listener in #2, and adding `n` listeners in #1. But I'd be curious to know why. — Tom Foster, Oct 21 '21 at 14:35
If you are wondering why #1 fires before #2 it's because #2 handles the event in its "Bubbling" phase. The event will go from the Window then Document and all the DOM tree in Capturing phase to the target (where it will be in "At target" phase) before going back to the Document then Window. #1 will eitehr handle the event in the "At target" phase, or also in "Bubbling" phase, where it will traverse the before its parent. — Kaiido, Oct 22 '21 at 01:39
Also, beware your event-delegation code is meant to break some day. You can't assume that `e.target` will be the element you expected. For instance if you change your DOM to be `click me` then `e.target` will be the , not the as your code currently assumes. You should walk the Event's `composedPath` looking for your element: `const target = e.composedPath().find((elem) => elem.matches && elem.matches(".nav__link")); if(target) { const navId = target.hash; ...` — Kaiido, Oct 22 '21 at 01:39
However I should note that your whole code could probably be replaced by a single CSS rule: `body{ scroll-behavior: smooth; }`. Then you let the default behavior of do its job. — Kaiido, Oct 22 '21 at 01:43
@Kaiido Hm, I always use `e.target.closest(".nav__link")` for this purpose. — Sebastian Simon, Oct 22 '21 at 03:53
@SebastianSimon yes you are right this would do the same as the code in my comment, with better browser support. But both would actually fail in case we click somewhere in the delegatedTarget where no element matches our selector, but if the delegatedTarget is itself a decendant of such an element matching our selector. Don't know if I'm clear enough, so here is a fiddle: https://jsfiddle.net/6dz491gq/ — Kaiido, Oct 22 '21 at 05:27

Why event delegation in Javascript is faster from normal child event?

0 Answers0