Event capturing (bubbling) delay question

#1

Hello there! I’m learning event phasing of nested elements so I create small project. Codepen JS starts on 43rd line.

So here’s simple nested divs.

<div id="zzz" class="thir">
  0
  <div id="xxx" class="thir">
    0
    <div id="sss" class="thir">
      0
    </div>
  </div>
</div>

And here what we do with them.

const ar2 = [zzz, xxx, sss];
ar2.map(e => {
  e.addEventListener('click', nestedClick, phase);
})

function nestedClick(e) {
  // e.stopPropagation();
  const meow = this;
  const prevColor = this.style.backgroundColor;
  this.style.backgroundColor = '#757575';
  window.setTimeout(() => { meow.style.backgroundColor = prevColor}, 500);
}

To visually show how capturing/bubbling works I’d like to set timeout on each step, wait until it’s done and trigger next click with the same strategy. But here I see after I click on any element event still goes through, changing color and forces all .setTimeout() like at the same time. How can I repair it?

Side question: why Event.stopPropagation() works whether it’s capturing or bubbling phase?

Thank you for attention!

#2

I followed your convention and used as silly names for variables as possible. Implementation took me twice as time because of that, but hell, it was fun. Enjoy.

Love the idea, btw.

1 Like
#3