DEV Community

Cover image for Are you sure you know how an event propagates in JavaScript?

Are you sure you know how an event propagates in JavaScript?

Amandeep Singh on February 17, 2021

Events are everywhere in web programming — input change, mouse move, button click, and page scroll are all forms of events. These are the actions t...
Collapse
 
jamesthomson profile image
James Thomson

TIL about eventPhase. It really doesn't matter how long you're in this profession, you really do learn something new every day.

Collapse
 
aman_singh profile image
Amandeep Singh

Totally agree on this one. 👍

Collapse
 
pgoldrbx profile image
Phil Gold

Thank you for this! I had a bad interview a month ago where the question came up as to how to execute the parent node handler first and despite 20 years of experience I really could not remember. There just hasn’t been a scenario I’ve needed to do this and my past reading of useCapture in the docs was not coming to me. Today I got the answer and it was a wonderful reminder. Thank you!

The only thing that could make this post better might be an example of how this might be useful. I can imagine some analytics cases but that’s not direct functionality.

Collapse
 
aman_singh profile image
Amandeep Singh

Thanks for your feedback. I am sorry to hear about your interview.

Regarding the capturing phase, I haven't seen/found any practical use cases of it yet.

But the bubbling phase is the core of event delegation.

Interestingly, React uses this mechanism to attach all of your event handlers at the root DOM container (v17).

Collapse
 
elabftw profile image
eLabFTW

What is interesting here is that Phil failed his interview for not remembering something that IS NOT USEFUL, or maybe is in some very weird corner case...

Anyway, nice article Amandeep!

Thread Thread
 
aman_singh profile image
Amandeep Singh

Thanks for your comment. 🙂👍

I am surprised that someone could test you based on if you know how event capturing works. These things are not what we do everyday and thus hard to come by, or you just forget. And that's why docs are there when you need a refresher.

I totally don't condone these interviews. I personally would stay away from these if I could.

Thread Thread
 
elabftw profile image
eLabFTW

Agreed. It's stupid to expect someone to know everything there is to know about web technologies. There is so much to know (and then more) that questioning someone without the ability to google something is pointless. A better test would be to look at how someone would solve a particular problem with all the tools at their disposal.

Thread Thread
 
jamesthomson profile image
James Thomson

A better test would be to look at how someone would solve a particular problem with all the tools at their disposal.

Exactly this. Testing how a candidate can memorise and regurgitate documentation is useless. Test how they solve problems and how they interact with you and your team. This is how you find good developers that your team can work with (which is just as, if not more, important as the candidates skillset).

Collapse
 
peerreynders profile image
peerreynders • Edited

Peculiar how React's synthetic event system ignores the handleEvent portion of the EventListener interface which allows objects to listen to events.

function makeListener(refs) {
  let stopGrandparent = refs.stopGrandparent.checked;
  let stopParent = refs.stopParent.checked;
  let stopClick = refs.stopClick.checked;

  const log = (msg) => {
    const current = refs.log.value;
    refs.log.value =
      current.length > 0 && msg.length > 0 ? current + `\n` + msg : msg;
  };

  return {
    handleEvent(e) {
      switch (e.currentTarget) {
        case refs.grandparent:
          if (e.type === 'click') clickGrandparent(log, stopGrandparent, e);
          break;

        case refs.parent:
          if (e.type === 'click') clickParent(log, stopParent, e);
          break;

        case refs.clickMe:
          if (e.type === 'click') clickButton(log, stopClick, e);
          break;

        case refs.stopGrandparent:
          if (e.type === 'change') stopGrandparent = e.target.checked;
          break;

        case refs.stopParent:
          if (e.type === 'change') stopParent = e.target.checked;
          break;

        case refs.stopClick:
          if (e.type === 'change') stopClick = e.target.checked;
          break;

        case refs.clear:
          if (e.type === 'click') log('');
          break;
      }
    },
  };
}

function initialize(grandparent) {
  const root = grandparent.parentElement;
  const parent = root.querySelector('.js-parent');
  const clickMe = root.querySelector('.js-click-me');
  const [stopGrandparent, stopParent, stopClick] = Array.from(
    document.querySelectorAll('input[type="checkbox"]')
  );
  const clear = root.querySelectorAll('button')[1];
  const log = root.querySelector('textarea');
  const refs = {
    parent,
    grandparent,
    clickMe,
    stopGrandparent,
    stopParent,
    stopClick,
    clear,
    log,
  };

  const listener = makeListener(refs);

  grandparent.addEventListener('click', listener, { capture: true });
  parent.addEventListener('click', listener);
  clickMe.addEventListener('click', listener);
  stopGrandparent.addEventListener('change', listener);
  stopParent.addEventListener('change', listener);
  stopClick.addEventListener('change', listener);
  clear.addEventListener('click', listener);
}
Enter fullscreen mode Exit fullscreen mode

JS Fiddle

Seems Preact is looking into adding support for it (see also radEventListener: a Tale of Client-side Framework Performance).

Collapse
 
white_shadow profile image
Abhijeet

Wow...really helpful👍

Collapse
 
sreepati profile image
Sreepati

wow didn't have any idea about this. Thanks.

Collapse
 
jwp profile image
John Peters

Love this article Clear, Complete and Consise.

Collapse
 
aman_singh profile image
Amandeep Singh

Thank you. Glad that it was helpful 🙂

Collapse
 
brettcnelson profile image
𝙱𝚛𝚎𝚝𝚝

Very helpful post, thanks. Should the last comment in the last code block say element2?

Collapse
 
aman_singh profile image
Amandeep Singh

Thanks for the feedback and that Typo 🙂👍. Cheers