JSFiddle - React, Tailwind, and code Playground

by niceaji

HTML

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <title>테스트 문서</title>
</head>
<body>

<div id="wrap">
    <div id="btn">button</div>
</div>


</body>
</html>

CSS

div {margin:50px;padding:10px}
#wrap {background-color:#ccc;} 
#btn { border:1px solid black ;background-color:#eee;cursor:pointer}

JavaScript

var wrap = document.querySelectorAll('#wrap')[0];
var btn = document.querySelectorAll('#btn')[0];

btn.addEventListener('click', function(event){

    console.log("btn click!", event.target);

});
wrap.addEventListener('click', function(event){

    console.log("wrap click!", event.target);
});
document.addEventListener('click', function(event){

    console.log("body click!", event.target);
});