<div class="container" data-value="container">
			<div class="c1" data-value="1">1</div>
			<div class="c2" data-value="2">2</div>
			<div class="c3" data-value="3">3</div>
			<div class="c4" data-value="4">4</div>
			container
		</div>

<div  class="left">
위는 컨테이너만 click 등록함  
</div>
<div id="result" class="left">
	You Click:
</div>
.container {
				display: grid;
				grid-template-columns: 150px 150px;
				grid-template-rows: 150px 150px;
				background-color: pink;
				padding: 30px;
			}

			.c1 {
				background-color: red;
			}

			.c2 {
				background-color: yellow;
			}

			.c3 {
				background-color: green;
			}

			.c4 {
				background-color: blue;
			}

.c5 {
  background-color: purple;
}

.left {
  font-size: 30px;
				text-align: left;
			}

			* {
				font-size: 40px;
				text-align: center;
				font-weight: 700;
}

#change-btn {
  font-size: 20px;
}
const result = document.getElementById("result");
const container = document.querySelector(".container");
const divs = document.querySelectorAll("div");

let curMode = "Capturing";
      
   container.addEventListener("click", (e) => {
       result.textContent = "You Click: " + e.target.dataset.value;
    })
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.