this vs event.target

1️⃣ event.target

이벤트가 실제로 발생한 요소
이벤트가 위임되거나 중첩된 요소에서 발생해도 항상 실제 클릭된 요소를 반환

2️⃣ this

이벤트 핸들러가 바인딩된 요소(=이벤트를 등록한 요소)
이때! 화살표 함수 (⇒)를 사용하면 this는 undefined, window가 될 수 있다.

<button onclick="alert(this.innerHTML)">클릭해 주세요.</button>
// this : button

❗️event.target vs this

<ul id="list">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>

document.getElementById("list").addEventListener("click", function (event) {
  console.log("event.target:", event.target); // 클릭된 요소 (li)
  console.log("this:", this); // 이벤트가 걸린 요소 (ul)
});

event.target : li (클릭된 요소)
this : ul (이벤트가 등록된 요소)

const button = document.createElement("button");
button.textContent = "클릭";
document.body.appendChild(button);
button.addEventListener("click", function (event) {
  console.log("event.target:", event.target); // 버튼 자체
  console.log("this:", this); // 버튼 자체 (일반 함수 사용)
});
button.addEventListener("click", (event) => {
  console.log("event.target:", event.target); // 버튼 자체
  console.log("this:", this); // 화살표 함수이므로 `window` 또는 `undefined`
});

일반 함수 (`function`) 사용 시 `this === button` 화살표 함수 (`=>`) 사용 시 `this === window` (주의!)

3️⃣this를 명확하게 사용하려면?

bind(), call(), apply() / event.currentTarget

1) bind(), call(), apply()를 사용하면 this를 고정 가능

button.addEventListener("click", function () {
  console.log("this:", this.textContent); // "클릭"
}.bind(button));

2) event.currentTarget 사용하면 this 대신 안전하게 이벤트 등록 요소를 가져올 수 있음

document.getElementById("list").addEventListener("click", function (event) {
  console.log("event.currentTarget:", event.currentTarget); // 항상 ul
});

4️⃣ 정리

구분	설명
event.target	실제 이벤트가 발생한 요소 (클릭된 요소)
this	이벤트 핸들러가 걸린 요소 (기본적으로 currentTarget과 동일, 화살표 함수 예외)
event.currentTarget	이벤트가 등록된 요소 (this와 같은 역할, 다만, 화살표 함수에서도 사용 가능)

event.target vs event.currentTarget(this)

• event.target: 이벤트가 발생한 실제 타깃 요소
  버블링 진행되어도 변하지 않는다
• event.currentTarget: 이벤트 리스너가 등록된 요소, 현재 요소
  
  예시)form.onclick 하면 event.target : 폼 안쪽 실제 클릭 요소(p, div, form)
  this(event.currentTarget) : form 요소
  

✔️태그 vs 요소
태그는 요소의 부분집합이다
태그 : 요소 시작과 끝을 알리는 문법 기호

❗️ 주의

function sayThanks() {
  alert('감사합니다!');
}

elem.onclick = sayThanks;
// sayThanks()를 할당하면 동작하지 않는다
// sayThanks()는 함수를 호출하겠다는 의미

아무것도 반환하지 않으면 이벤트가 원하는 대로 동작하지 않는다
하지만, HTML 속성에는 괄호가 있어야 한다.

---

5️⃣ addEventListener와 대안 비교

• addEventListener("click", callback): 이벤트 리스너를 추가

• 대안

  • onclick 속성: 한 개의 이벤트 핸들러만 할당 가능
  • jQuery.on("click", callback): jQuery 방식

  addEventListener는 이벤트를 중복 추가할 수 있다는 장점이 있다.