자바스크립트 공부하기 - event, event handler (이벤트, 이벤트 핸들러)

✅ 이벤트(Event)란?

이벤트는 웹 페이지에서 발생하는 모든 행동이나 변화를 의미해.
예를 들면:

• 버튼을 클릭했을 때 (click 이벤트)
• 키보드를 눌렀을 때 (keydown 이벤트)
• 마우스를 올려놓았을 때 (mouseover 이벤트)
• 입력 창에 글자를 입력했을 때 (input 이벤트)

이런 것들이 전부 "이벤트"야.

---

✅ 이벤트 핸들러(Event Handler)란?

이벤트 핸들러는 이벤트가 발생했을 때 실행되는 함수야.
즉, "이벤트가 발생하면 이 코드를 실행해!"라고 지정하는 역할을 해.

📌 예제 (이벤트 vs. 이벤트 핸들러)

// 이벤트: 'click' (클릭하는 행위)
// 이벤트 핸들러: 클릭했을 때 실행할 함수
document.querySelector("button").addEventListener("click", function () {
  alert("버튼이 클릭됨!"); // 이 함수가 이벤트 핸들러
});

• click 👉 이벤트 (클릭이라는 동작)
• function () { alert("버튼이 클릭됨!"); } 👉 이벤트 핸들러 (클릭하면 실행되는 코드)

📌 쉽게 말하면:

• 이벤트 = "무슨 일이 일어남"
• 이벤트 핸들러 = "그 일이 일어났을 때 실행되는 코드"

---

 

✅ 이벤트에 이벤트 핸들러 설정하는 법

1. JavaScript에서 onclick 속성 사용

👉 JavaScript에서 직접 요소의 onclick 속성을 변경하는 방법이야.

const btn = document.querySelector("#myButton");

btn.onclick = function () {
  alert("버튼이 클릭됨!");
};

📌 단점: 나중에 다른 핸들러를 추가하면 기존 핸들러가 덮어씌워져.

 

 

2. addEventListener 사용 (⭐ 추천 ⭐)

👉 가장 많이 쓰이고, 여러 개의 핸들러를 추가할 수 있어!

const btn = document.querySelector("#myButton");

btn.addEventListener("click", function () {
  alert("버튼이 클릭됨!");
});

📌 장점:
✅ 여러 개의 이벤트 핸들러 추가 가능
✅ 동적으로 이벤트를 추가/삭제할 수 있음

 

 

이벤트 핸들러를 제거하고 싶다면? removeEventListener를 사용하면 돼!

function handleClick() {
  alert("한 번만 실행됨!");
  btn.removeEventListener("click", handleClick);
}

const btn = document.querySelector("#myButton");
btn.addEventListener("click", handleClick);

 

if (count === 5) {
  alert("5번 클릭 완료!");
  btn.removeEventListener("click", handleClick);  // 5번 클릭 후 핸들러 제거
}

 

---

✅ 실무에서 자주 쓰이는 이벤트 & 이벤트 핸들러

✅ 1. 버튼 클릭 이벤트 (click)

📌 버튼을 클릭하면 특정 동작 실행

document.querySelector("#btn").addEventListener("click", function () {
  alert("버튼이 클릭되었습니다!");
});

 

✅ 2. 폼 제출 이벤트 (submit)

📌 폼 제출을 가로채서 유효성 검사

document.querySelector("#form").addEventListener("submit", function (event) {
  event.preventDefault(); // 기본 동작(페이지 새로고침) 막기
  alert("폼이 제출되었습니다!");
});

📌 실무 예시
👉 회원가입, 로그인 폼 처리

 

 

✅ 3. 키보드 입력 이벤트 (keydown, keyup)

📌 엔터 키를 눌렀을 때 실행

document.addEventListener("keydown", function (event) {
  if (event.key === "Enter") {
    console.log("엔터 키를 눌렀습니다!");
  }
});

📌 실무 예시
👉 검색창에서 엔터 키 입력 감지

 

✅ 4. 마우스 오버 이벤트 (mouseover, mouseout)

📌 마우스를 올리면 색상 변경

const box = document.querySelector("#box");

box.addEventListener("mouseover", function () {
  box.style.backgroundColor = "lightblue";
});

box.addEventListener("mouseout", function () {
  box.style.backgroundColor = "white";
});

---

✅ 이벤트 객체란?

이벤트가 발생했을 때 브라우저가 자동으로 생성하는 객체야.
👉 이벤트에 대한 정보(예: 클릭한 위치, 키보드 입력값 등)를 담고 있어!

 

👉 우리가 웹사이트에서 버튼을 클릭하거나 키보드를 누를 때, 브라우저는 그 정보를 자동으로 이벤트 객체(event object) 안에 담아둬!

즉, "누가, 언제, 어디서, 어떻게" 이벤트를 발생시켰는지를 기록하는 정보 저장소라고 생각하면 돼! 📦

 

✅ 이벤트 객체의 예시

 

1️⃣ 마우스 이벤트 (click, mousemove 등)

document.addEventListener("click", function (event) {
  console.log("클릭한 요소:", event.target); // 클릭한 요소
  console.log("마우스 X 좌표:", event.clientX);
  console.log("마우스 Y 좌표:", event.clientY);
});

📌 유용한 속성들

• event.target → 클릭한 요소
• event.clientX, event.clientY → 클릭한 좌표

2️⃣ 키보드 이벤트 (keydown, keyup)

document.addEventListener("keydown", function (event) {
  console.log("누른 키:", event.key);
  console.log("키 코드:", event.keyCode);
});

 

document.addEventListener("keydown", function (event) {
  console.log("누른 키:", event.key);
});

 

🔹 만약 "A" 키를 누르면 콘솔에 이렇게 뜰 거야:

누른 키: A

 

📌 유용한 속성들

• event.key → 누른 키 (Enter, a, Shift 등)
• event.keyCode → 키의 고유 숫자 값 (이제는 key 사용을 추천)

👉 이벤트 객체를 활용하면, 사용자의 동작을 더 정확하게 감지하고 원하는 기능을 만들 수 있어! 🚀

 

---

✅ 이벤트 객체에는 다양한 속성값(properties) 이 있고, 이걸 활용하면 이벤트를 더 세밀하게 컨트롤할 수 있어!

🎯 event.target 예제 (클릭한 요소 확인하기)

document.addEventListener("click", function (event) {
  console.log("클릭한 요소:", event.target);
});

🔹 실행 방식:

• 화면을 클릭하면, 클릭한 요소(타깃 요소) 가 event.target에 저장돼.
• 클릭한 요소의 정보를 콘솔에 출력해.

📌 예시:

• 버튼을 클릭하면 <button> 태그가 출력될 거야.
• 텍스트를 클릭하면 <p> 태그가 출력될 수도 있어.

🎯 key 속성을 활용한 키보드 이벤트 예제

document.addEventListener("keydown", function (event) {
  console.log("눌린 키:", event.key);
});

• 키보드를 누르면 눌린 키 정보가 콘솔에 출력됨.

📌 예시:

• Enter 키를 누르면 "눌린 키: Enter"가 출력됨.
• A 키를 누르면 "눌린 키: a"가 출력됨.

 

 

자바스크립트 이벤트 처리에서 event.target과 event.currentTarget의 차이를 좀 더 쉽게 설명해 드릴게요.

상황 설정:

• 여러 개의 단추가 들어있는 상자가 있다고 상상해 보세요.
• 상자 자체에도 이벤트(예: 클릭)를 감지하는 기능이 있고, 각 단추에도 클릭 이벤트를 감지하는 기능이 있습니다.

event.target:

• 이벤트가 실제로 발생한 "진짜" 대상을 가리킵니다.
• 만약 특정 단추를 클릭했다면, event.target은 그 단추를 가리킵니다. 즉, "어떤 단추가 눌렸는지"를 알려줍니다.
• 상자 안의 여러 단추 중 "실제로 눌린 단추"를 정확히 알려주는 역할입니다.

event.currentTarget:

• 이벤트 핸들러(이벤트를 처리하는 코드)가 연결된 대상을 가리킵니다.
• 상자를 클릭하든, 단추를 클릭하든, 상자에 연결된 이벤트 핸들러가 실행된다면 event.currentTarget은 항상 "상자"를 가리킵니다.
• 즉, "이 이벤트를 처리하는 코드가 어디에 연결되어 있는지"를 알려줍니다.
• 이벤트가 어디서 발생했든 이벤트 감지 기능을 가지고 있는 "상자"를 알려주는 역할입니다.

핵심 요약:

• event.target: "누가(어떤 요소) 눌렸나?"
• event.currentTarget: "어디에(어떤 요소) 연결된 코드가 실행되나?"

예시:

• 상자 안의 단추를 클릭하면:
  • event.target은 클릭된 단추를 가리킵니다.
  • event.currentTarget은 상자를 가리킵니다.
• 상자 자체를 클릭하면:
  • event.target은 상자를 가리킵니다.
  • event.currentTarget은 상자를 가리킵니다.

이 두 속성은 이벤트 위임과 같은 고급 기술을 사용할 때 특히 유용합니다.