JS_addEventListener

✅ addEventListener() 기본 개념

addEventListener()는 HTML 요소에 이벤트 리스너를 추가하는 표준적인 방법이야.
이 방식은 onclick="" 같은 인라인 이벤트 핸들러보다 더 깔끔하고 유지보수가 쉬워! 🚀

📌 기본 문법

element.addEventListener("이벤트 유형", 실행할 함수);

---

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

<button id="myButton">클릭</button>

<script>
document.getElementById("myButton").addEventListener("click", function() {
    alert("버튼이 클릭됨!");
});
</script>

✅ 버튼 클릭 시 alert 창이 뜸.

---

📌 2. 입력 필드 값 변경 감지 (input 이벤트)

<input type="text" id="username" placeholder="이름 입력">
<p id="output"></p>

<script>
document.getElementById("username").addEventListener("input", function() {
    document.getElementById("output").textContent = "입력값: " + this.value;
});
</script>

✅ 사용자가 입력하면 실시간으로 화면에 표시됨!

---

📌 3. 마우스 이벤트 (mouseover, mouseout)

<button id="hoverButton">마우스를 올려보세요</button>

<script>
const button = document.getElementById("hoverButton");

button.addEventListener("mouseover", function() {
    button.style.backgroundColor = "red";
});

button.addEventListener("mouseout", function() {
    button.style.backgroundColor = "";
});
</script>

✅ 마우스를 올리면 버튼 색이 빨간색으로 변하고, 마우스를 빼면 원래 색으로 돌아감.

---

📌 4. 폼 제출 이벤트 (submit)

<form id="myForm">
    <input type="text" id="name" placeholder="이름 입력">
    <button type="submit">제출</button>
</form>

<script>
document.getElementById("myForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 기본 제출 방지
    alert("폼이 제출됨!");
});
</script>

✅ event.preventDefault();를 사용해 폼이 실제로 제출되지 않도록 방지 가능!

---

📌 5. 키보드 이벤트 (keydown, keyup)

<input type="text" id="textInput" placeholder="키보드 입력">
<p id="keyOutput"></p>

<script>
document.getElementById("textInput").addEventListener("keydown", function(event) {
    document.getElementById("keyOutput").textContent = `눌린 키: ${event.key}`;
});
</script>

✅ 사용자가 키보드를 누를 때마다 어떤 키가 눌렸는지 표시됨.

---

📌 6. this 키워드 활용 (addEventListener 내부에서 현재 요소 참조)

<button id="colorButton">색 변경</button>

<script>
document.getElementById("colorButton").addEventListener("click", function() {
    this.style.backgroundColor = "blue"; // 현재 클릭된 버튼의 배경색 변경
});
</script>

✅ this를 사용하면 event.target을 따로 안 써도 됨.

---

📌 7. removeEventListener()로 이벤트 제거하기

이벤트를 추가한 후 특정 상황에서 이벤트를 제거하고 싶다면 removeEventListener()를 사용하면 돼.

<button id="toggleButton">이벤트 제거</button>

<script>
function handleClick() {
    alert("버튼이 클릭됨!");
}

// 이벤트 추가
document.getElementById("toggleButton").addEventListener("click", handleClick);

// 3초 후 이벤트 제거
setTimeout(() => {
    document.getElementById("toggleButton").removeEventListener("click", handleClick);
    alert("이제 버튼 클릭 이벤트가 제거됨!");
}, 3000);
</script>

✅ 3초 후 버튼을 클릭해도 이벤트가 실행되지 않음!

---

🚀 addEventListener() 사용 정리

이벤트	설명	예제
click	클릭 이벤트	button.addEventListener("click", function() {...});
input	입력 값 변경 시 실행	input.addEventListener("input", function() {...});
mouseover	마우스 올리기	element.addEventListener("mouseover", function() {...});
mouseout	마우스 벗어나기	element.addEventListener("mouseout", function() {...});
submit	폼 제출 시 실행	form.addEventListener("submit", function(event) {...});
keydown	키가 눌렸을 때	input.addEventListener("keydown", function(event) {...});
keyup	키에서 손을 뗄 때	input.addEventListener("keyup", function(event) {...});

👉 addEventListener()를 사용하면 동적으로 여러 이벤트를 추가할 수 있고, 유지보수가 더 쉬워! 🚀