효율적인 이벤트 관리

갑자기 운동을 하다가 효율적인 이벤트 관리에 대해서 생각해 보고 코드를 작성하게 되었다.

먼저 button 100개를 생성해서 bodyDOM에 추가해 주었다.

이후 두 가지 방법으로 접근을 하였는데 위에 주석처리 된 부분은 버튼 100개에 전부 addEventListener()을 추가해 주었다. 이렇게 했을 때 굉장한 메모리 손실이나 효율성이 떨어질 거라고 생각이 들었다.

그래서 click event가 발생한 bodyDOM의 요소만 출력할 순 없을까 생각하였고 아래의 코드와 같이 생각해냈다.

1
2
3bodyDOM.addEventListener("click", (e) => {
  console.log(e.target.innerText);
});

갑자기 이런 생각이 들어서 실습을 해보았다. ㅋㅋ