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

Question

button*100

라치고 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 type = "button" class = "btn_right" > 오른쪽 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 (); } })

bekinbum9513 · Answer

그렇군요 넵

zerocho · Answer

이벤트리스너에서 e.target을 if문으로 구분해야할 상황이면 그냥 이벤트리스너를 따로 연결하는 게 낫다고 생각이 듭니다. 구분하지 않아도 되는 경우는 버블링을 활용하는게 메모리 절약이 되긴 합니다.