Why are capture events and bubbling events executed twice?

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style type="text/css">
  -sharpchild{
    background: red;
    width:50px;
    height:50px;
  }
  -sharpfather{
    width:100px;
    height:100px;
    background:green;
  }
  -sharpgrandparent{
    width:150px;
    height:150px;
    background:black;
    margin:100px auto 0;
  }
  </style>
</head>
<body>
  <div id="grandparent">
    <div id="father">
      <div id="child"></div>
    </div>
  </div>
</body>
<script type="text/javascript">
  var grandparent = document.getElementById("grandparent");
  var parent = document.getElementById("father");
  var child = document.getElementById("child");
  var html = document.getElementsByTagName("html")[0];
  var body = document.body;
  grandparent.addEventListener("click",function () {
    console.log("I am capturing grandparent");
  },true);
  grandparent.addEventListener("click",function () {
    console.log("I am grandparent");
  },false);
  parent.addEventListener("click",function() {
    console.log("I am capturing parent");
  },true);
   parent.addEventListener("click",function() {
    console.log("I am parent");
  },false);
   child.addEventListener("click",function() {
    console.log("I am capturing child");
  },true);
  child.addEventListener("click",function() {
    console.log("I am child");
  },false);
  body.addEventListener("click",function() {
    console.log("I am capturing body");
  },true);  
  body.addEventListener("click",function() {
    console.log("I am body");
  },false);
  html.addEventListener("click",function() {
    console.log("I am capturing html");
  },true);
  html.addEventListener("click",function() {
    console.log("I am html");
  },false);
  document.addEventListener("click",function() {
    console.log("I am capturing document");
  },true);
  document.addEventListener("click",function() {
    console.log("I am document");
  },false);
  window.addEventListener("click",function() {
    console.log("I am capturing window");
  },true);
  window.addEventListener("click",function() {
    console.log("I am window");
  },false);
  parent.addEventListener("click",function() {
    console.log("I am capturing parent");
  },true);
   parent.addEventListener("click",function() {
    console.log("I am parent");
  },false);
</script>
</html>

Note: I will

  parent.addEventListener("click",function() {
    console.log("I am capturing parent");
  },true);
   parent.addEventListener("click",function() {
    console.log("I am parent");
  },false);

The two lines of code above are repeated twice, once in the middle and once at the end.

div,:

test.html:75 I am capturing window
test.html:69 I am capturing document
test.html:63 I am capturing html
test.html:57 I am capturing body
test.html:39 I am capturing grandparent
test.html:45 I am capturing parent
test.html:48 I am parent
test.html:81 I am capturing parent
test.html:84 I am parent
test.html:42 I am grandparent
test.html:60 I am body
test.html:66 I am html
test.html:72 I am document
test.html:78 I am window

Why the result is not
test.html:75 I am capturing window
test.html:69 I am capturing document
test.html:63 I am capturing html
test.html:57 I am capturing body
test.html:39 I am capturing grandparent
test.html:45 I am capturing parent
test.html:48 I am parent
test.html:42 I am grandparent
test.html:60 I am body
test.html:66 I am html
test.html:72 I am document
test.html:78 I am window

test.html:75 I am capturing window
test.html:69 I am capturing document
test.html:63 I am capturing html
test.html:57 I am capturing body
test.html:39 I am capturing grandparent
test.html:45 I am capturing parent
test.html:81 I am capturing parent
test.html:48 I am parent
test.html:84 I am parent
test.html:42 I am grandparent
test.html:60 I am body
test.html:66 I am html
test.html:72 I am document
test.html:78 I am window

Please explain?