microtask test1

by jin5354

HTML

<div class="outer">
  <div class="inner"></div>
</div>

CSS

.outer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  background-color: red;
}

.inner {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

JavaScript

let $outer = document.querySelector('.outer')
let $inner = document.querySelector('.inner')

function onClick() {
  console.log('click!')
	setTimeout(() => {
  	console.log('setTimeout!')
  }, 0)
  Promise.resolve().then(() => {
    console.log('Promise!')
  })
}

$outer.addEventListener('click', onClick)
$inner.addEventListener('click', onClick)