Event Delegation

by Nabaraj Saha

HTML

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
  <div>13</div>
  <div>14</div>
  <div>15</div>
  <div>16</div>
  <div>17</div>
  <div>18</div>
  <div>19</div>
  <div>20</div>
</div>

CSS

.container{
  display: flex;
  text-wrap:wrap;
}
.container div{
  width:30px;
  height:30px;
  align-items:center;
  display:flex;
  border:1px solid;
  justify-content:center;
}

JavaScript

document.querySelectorAll(".container")[0].addEventListener("click",function(e){
console.log("test")
	let innerText = e.target.innerText;
	console.log(innerText)
})