Edit in JSFiddle

var useCapture = true;
var order = document.getElementById("order");
var toggle = null; // 익명함수를 가리킬 전역변수

(toggle = function(t) {
  var a = document.getElementById('A');
  var b = document.getElementById('B');
  var c = document.getElementById('C');

  useCapture = !useCapture; // 캡쳐 순서를 바꾼다 시작이 버블링
  order.innerHTML = ""
    // 이벤트를 지운다 이벤트 처리 함수가 명시적이아야 삭제 가능
  a.removeEventListener('click', printA); 
  b.removeEventListener('click', printB);
  c.removeEventListener('click', printC);

  // 이벤트를 등록한다.
  a.addEventListener('click', printA, useCapture);
  b.addEventListener('click', printB, useCapture);
  c.addEventListener('click', printC, useCapture);

  var output = document.getElementById('output');
  if (useCapture) {
    output.innerHTML = "캡쳐링";
  } else {
    output.innerHTML = "버블링";
  }

  c.click(); // 클릭을 시물레이션한다.
})();

function printA(event) {
  clear(event);
  order.innerHTML += " A";
}

function printB(event) {
  clear(event);
  order.innerHTML += " B";
}

function printC(event) {
  clear(event);
  order.innerHTML += " C";
}
// 문자열이 일정길이 이상이면 지운다.
var preTarget = "";
function clear(event) {
  var len = 0;
  switch (event.target.id) {
    case 'A': len = 1; break; // A 클릭시 1개만 찍히게 함
    case 'B': len = 3; break; // B 클릭시 2개만 찍히게 함
    case 'C': len = 5; break; // 3개 모두 출력
  }
  // 이전 타겟과 다르면 기존내용을 지우고 새로 출력
  if ((event.target.id != preTarget) || (order.innerHTML.length > len)) {
    order.innerHTML = "";
  }
  preTarget = event.target.id;
}

<div id="A" class="layer">
  <span>A</span>
  <div id="B" class="layer">
    <span>B</span>
    <div id="C" class="layer">
      <span>C</span>클릭!</div>
  </div>
</div>
<p>
  <button type="button" onclick="toggle()">전파방식 토글</button>
</p>
<P><span id="output">버블링</span> 전파 순서 :<span id="order"></span> </P>

#A {
  background-color: #949dcf;
  width: 200px;
  height: 200px;
}

#B {
  background-color: #c0db79;
  width: 150px;
  height: 150px;
}

#C {
  background-color: #f9a830;
  width: 100px;
  height: 100px;
  box-sizing: border-box;
  line-height: 100px;
  text-align: center;
}

.layer {
  position: relative;
}

.layer > span {
  position: absolute;
  left: 10px;
  bottom: 10px;
  line-height: initial;
  font-size: 1.8em;
  font-weight: bold;
  color: white;
}