$(this) vs e.target 차이점

오늘은 jquery 코드 작성 중 있었던 이슈를 간단히 정리했습니다.

✅ 이슈 코드

// jsp 코드 - 간단 예시 버전
<tbody>
	<tr>
 		<td><input type="checkbox" value="1"/></td>
 		<td>김철수</td>
 		<td>12345</td>
	</tr>
	<tr>
 		<td><input type="checkbox" value="2"/></td>
 		<td>김영희</td>
 		<td>4321</td>
	</tr>
</tbody>


// js 코드 - 간단 예시 버전
<script>
   
$('tbody tr').on('click', function() {
  // 클릭된 요소가 첫 번째 <td> 안에 있는 경우 이벤트 무시
  if ($(this).closest('td').index() === 0) {
    return; // 첫 번째 <td> 클릭 시 아무 동작 안 함
  }

  // 그 외 td 클릭 시 동작 실행
  console.log('이벤트 발생');
});

</script>

목적 및 의도
여러 <tr/> 에 onclick 이벤트를 부여하고 각 <tr/>이 클릭되었을 때 클릭된 index가 첫 <td/>가 아니라면 이벤트가 발생

실제 발생 (문제)
해당 이벤트 발생 시 <td/>의 index를 찾지 못해서 -1 리턴.

원인
해당 코드에서의 this는 클릭한 요소가 아닌 이벤트가 바인딩된 요소 자체를 가리키기 때문에 부적절한 문법이었음.

해결방안
this가 아닌 e.target을 활용하여 실제로 이벤트를 발생시킨 하위 요소를 가져옴

🔍 jQuery 이벤트 핸들러에서 this vs e.target 차이

표현	의미
this	.on('click', ...)이 걸린 요소 (<tr>)를 조작할 때 사용
e.target	실제 클릭된 요소 (예: <input>, <td>)를 가리킴

✅ 결과 및 느낀점

this와 e.target는 명백히 사용용도가 다릅니다. 간혹 둘의 사용을 혼용하다가 헷갈리는 경우가 많은데 이번 기회를 통해 다시 차이점을 명확히 배울 수 있었습니다.