Why does the js event in this code not bubble up?

Question

I want to be able to click on div "three" and it should bubble up to the other two?

const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', function (e) {
  console.log(e.target.className);
}));

<div class="one">
  <div class="two">
    <div class="three">
        Hello World
    </div>
  </div>
</div>

Works for me, what Browser are you using? – tkausl Sep 07 '18 at 22:41 — tkausl, Sep 07 '18 at 22:41

score 2 · Answer 1 · answered Sep 07 '18 at 22:43

It does bubble up, you should get 3 log messages.

It logs three each time because e.target is the original element that the event is bubbling from. To get the current element in the propagation, use e.currentTarget. This code logs three, two, one.

See What is the exact difference between currentTarget property and target property in javascript

const divs = document.querySelectorAll('div');
divs.forEach(div => div.addEventListener('click', function (e) {
  console.log(e.currentTarget.className);
}));

<div class="one">
  <div class="two">
    <div class="three">
        Hello World
    </div>
  </div>
</div>

Why does the js event in this code not bubble up?

1 Answers1