Capture phase vs Bubble phase - why the following code it's not producing the same result?

Question

I want to implement my own DnD in pure Javascript - first for learning purposes - then maybe i'll use it - and i stumbled upon this bubble/capture concept. I thought i got it, by reading the accepted answer on this question: What is event bubbling and capturing?, and other articles as well.

But i didn't - because i can't explain why this 2 pieces of code don't produce the same result.

Why the order in which i register this events - matters? I assume they should be fired in the same order - no matter how they were registered - by the rules of capturing/bubbling. It's not the case.

Given that you click on div3 - this happens:

Case 1: jsBin

Case 2: also jsBin

Case 3 - it's the first answer of the above mentioned question

Html it's the same:

<div id="div1">
  div 1
  <div id="div2">
    div 2
    <div id="div3">
      div3
    </div>
  </div>
</div>

And the Case 1 Js:

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");

/* div1 */
div1.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 1");
}, true);

div1.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 1");
}, false);


/* div2 */
div2.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 2");
}, true);

div2.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 2");
}, false);


/* div3 */
div3.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 3");
}, true);

div3.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 3");
}, false);


var $log = $("#log");
function log(msg) {
   $log.append('<p>' + msg + '</p>');
}

Case 2 - javascript:

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");

/* capture events */
div1.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 1");

}, true);

div2.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 2");
}, true);

div3.addEventListener("click", function (event) {
  log("capture phase: you clicked on div 3");
}, true);

/* bubbling events */
div1.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 1");

}, false);

div2.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 2");
}, false);

div3.addEventListener("click", function (event) {
  log("bubble phase: you clicked on div 3");
}, false);

Where is the fallacy in my thinking? What did i miss? Thanks :)

@DavidDomain oh no! You are so right! :)) stupid mistake - what to do with the question now - can i delete it? so embarrassing .. :)) — AIon, Jan 16 '17 at 20:23
@Alon - Don't worry nobody is perfect. This is just a perfect example that the little thing are often overlooked. ;) — DavidDomain, Jan 16 '17 at 20:27

DavidDomain · Accepted Answer · 2017-01-16T20:30:50.447

The problem is at the declaration of your variables.

var div1 = document.querySelector("#div1");
var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3"); // <----

You are not getting any errors because it is totally legit to select an element by its id using only the name of the id. You shouldn't be doing it though. It can become a nightmare pretty quick.

test.addEventListener('click', function() {
  console.log(this);
})

<div id="test">Click Me</div>

score 0 · Answer 2 · answered Jan 16 '17 at 20:22

0

The problem is here

var div2 = document.querySelector("#div2");
var div2 = document.querySelector("#div3");

It must be

var div2 = document.querySelector("#div2");
var div3 = document.querySelector("#div3");

answered Jan 16 '17 at 20:22

Marco Moretti

689
4
11

Capture phase vs Bubble phase - why the following code it's not producing the same result?

2 Answers2