[js] e.target 과 e.currentTarget의 차이를 알아야 하는 이유

이벤트가 발생한 요소를 알 수 있는 event.target, event.currentTarget에 대해 알아보자!

 

<예시 코드>

 e.target.id를 가리켰을때

 <CheckBox
       label={
         <span>마케팅 수신 동의 (선택)</span>
       }
         id={"marketing"}
         name={field.name}
         value={field.value} //선택된 값들의 배열
          onClick={(e) => { 
               const isInclude = field.value.includes(e.target.id); // inCludes:배열에 특정 값(e.target.id)이 포함되어 있는지를 확인
               field.onChange(
                   isInclude
                   ? field.value.filter(
                   (value) => value !== e.target.id)
                   : [...field.value, e.target.id]
               );
         }}
  />

 

 

 

 

해당 버튼을 눌렀을때  버튼 속 아무곳이나 눌러도 체크가 되어야 하는데, 정확히 가운데를 눌러야 체크가 활성화 되는 이슈 발생..!

 

실제 이벤트가 발생한 곳은 아이콘인데, 아이콘은 실제로 id가 없다. 그래서 e.target.id를 콘솔로 확인해보면 빈문자열('')로 인식..

따라서 이벤트가 직접적으로 걸려있는 곳인 e.currentTarget으로 해야 target에 상관없이 체크박스에 체크가 활성화 된다!

 

e.target: 이벤트가 발생한 정확한 요소= 아이콘(위 예시 참고) 

                 ex> 사용자가 체크박스의 텍스트 또는 버튼을 클릭하면 해당 텍스트나 버튼이 e.target이 됨

e.currentTarget: CheckBox의 전체 영역

 

그래서 보통 currentTarget을 사용하는 것이 좋다!

 

만약 currentTarget을 쓰기 싫다면?

직접적으로 closest() 함수를 사용해 dom에 접근할 수도 있다.

closest() 란?
: 선택된 요소의 상위 요소 중 selector와 일치하는 가장 근접한 조상 요소를 반환한다.

  onClick={(e) => {
    const checkBoxElement = e.target.closest("div"); // 체크박스를 감싸는 가장 가까운 div 찾기
    if (checkBoxElement) {
      const isInclude = field.value.includes(e.target.id);
      field.onChange(
        isInclude
          ? field.value.filter((value) => value !== e.target.id)
          : [...field.value, e.target.id]
      );
    }
  }}

 

체크박스를 감싸는 가장 가까운(closest) div 요소를 찾아 체크박스 이벤트를 감지할 수 있다!