JSFiddle - React, Tailwind, and code Playground

by SUNGMIN SHIN

HTML

<div id="a1">
  a1
  <div id="b1">
    b1
    <div id="c1">
      c1
    </div>
    <!-- // #c1 -->
  </div>
  <!-- // #b1 -->
</div>
<!-- // #a1 -->


<div id="a2">
  a2
  <div id="b2">
    b2
    <div id="c2">
      c2
    </div>
    <!-- // #c2 -->
  </div>
  <!-- // #b2 -->
</div>
<!-- // #a2 -->

SCSS

// mixin
@mixin box($width:100%, $height:100%, $borderColor:blue) {
  box-sizing:border-box;
  width:$width;
  height:$height;
  padding:10px;
  margin:5px 0;
  border:1px solid $borderColor;
  text-align:center;
}

#a1{  
  @include box($width:40%);
  float:left;
  #b1{
    @include box();
    #c1{
      @include box();
    }
  }
}

#a2{
  @include box($width:40%, $height:auto, $borderColor:orange);
  float:right;
  #b2{
    @include box($borderColor:orange);
    #c2{
      @include box($borderColor:orange);
    }
  }
}

JavaScript

// jsfiddle의 특성상 $(document).ready는 생략

// elements
var a1Ele = document.getElementById('a1');
var b1Ele = document.getElementById('b1');
var c1Ele = document.getElementById('b1');

var a2Ele = document.getElementById('a2');
var b2Ele = document.getElementById('b2');
var c2Ele = document.getElementById('b2');

// count
var count = 0;



/* function */

// 캡쳐 단계 이벤트 등록
// document
document.addEventListener('click', function(event){
	count++;
  console.log('01. document phase='+event.eventPhase);
  console.log('count=' + count);
}, true);
// body
document.body.addEventListener('click', function(event){
  count++;
  console.log('02. body phase=' + event.eventPhase);
  console.log('count=' + count);
}, true);
// #a1
a1Ele.addEventListener('click', function(event){
	count++;
  console.log('03. #a1 phase=' + event.eventPhase);
  console.log('count=' + count);
}, true);
// #b1
b1Ele.addEventListener('click', function(event){
	count++;
  console.log('03. #b1 phase=' + event.eventPhase);
  console.log('count=' + count);
}, true);
// #a2
a2Ele.addEventListener('click', function(event){
	count++;
  console.log('03. #a2 phase=' + event.eventPhase);
  console.log('count=' + count);
}, true);



// 캡쳐, 버블 단계에 이벤트 등록
document.addEventListener('click', function(event){
	count++;
  console.log('11. document phase=' + event.eventPhase);
  console.log('count=' + count);
}, false);


// 캡쳐 단계에 이벤트 등록
document.body.addEventListener('click', function(event){
  count++;
  console.log('02. body phase=' + event.eventPhase);
  console.log('count=' + count);
}, false);
// #a1
a1Ele.addEventListener('click', function(event){
	count++;
  console.log('03. #a1 phase=' + event.eventPhase);
  console.log('count=' + count);
}, false);
// #b1
b1Ele.addEventListener('click', function(event){
	count++;
  console.log('03. #b1 phase=' + event.eventPhase);
  console.log('count=' + count);
}, false);
// #a2
a2Ele.addEventListener('click', function(event){
	count++;
  console.log('03. #a2 phase=' +...