DEV Community

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...

Read full post

James Thomson • Feb 18 '21

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

Amandeep Singh • Feb 18 '21

Totally agree on this one. 👍

Phil Gold • Feb 18 '21

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.

Amandeep Singh • Feb 19 '21

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).

eLabFTW • Feb 21 '21

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!

Amandeep Singh • Feb 21 '21

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.

eLabFTW • Feb 22 '21

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.

James Thomson • Feb 22 '21

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).

peerreynders • Feb 18 '21 • 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);
}