그럼 target 은 어떻게 사용해야 적절할까요?

<div>button*100 </div>

라치고 for 문 돌려서 100개나 되는 button 각각 하나마다

이벤트리스너를 달아주는게 좋아보이진 않는데요.

==========

검색을 해보니

부모 div 하나에다가만 이벤트리스너 달아주고

이벤트 버블링으로 처리하는 방법도 있다 라고 소개가 되어있더라구요. (e.target 으로요)

==========

1. 실무에서는 주로 어떠한 방식으로 사용하나요?

2. 버블링으로 한다치면 e.target 들을 어떠한 방식으로 구별하나요? (e.target.className 으로 하기엔 class 를 100개 다 다르게 작성해야하구...)

========

이하는 제가 작성해본 예시입니다. (moveEvent 함수는 생략하겠습니다.)

<div class="area_slide_arrow">
<button type="button" class="btn_left">왼쪽</button>
<button type="button" class="btn_right">오른쪽</button>
</div>

const elBtn = document.querySelector(".area_slide_arrow");
elBtn.addEventListener("click", (e) => {
if(e.target.className === "btn_left") {
index--;
moveEvent();
} else if(e.target.className === "btn_right") {
index++;
moveEvent();
}
})

인프런 커뮤니티 질문&답변