자바스크립트 이벤트 리스너 완벽 가이드! addEventListener 활용법 총정리 🚀 - 코드카인 티스토리

안녕하세요😊 코드카인 여러분!

자바스크립트에서 이벤트 리스너(addEventListener)를 사용하는 방법을 알아볼까요? 이벤트 리스너는 버튼 클릭, 마우스 이동, 키보드 입력 등 다양한 사용자 인터랙션을 감지하는 기능을 합니다. 예제를 통해 쉽게 이해해봐요!

---

🎯 addEventListener 기본 문법

자바스크립트에서 addEventListener를 사용하면 HTML 요소에 이벤트를 추가할 수 있어요.

element.addEventListener(event, function, useCapture);

• element : 이벤트를 적용할 HTML 요소
• event : "click", "mouseover", "keydown" 같은 이벤트 유형
• function : 이벤트 발생 시 실행될 함수
• useCapture (선택사항) : true이면 캡처 단계에서 실행, false이면 버블링 단계에서 실행 (기본값: false)

---

🖱️ 버튼 클릭 이벤트

가장 기본적인 클릭 이벤트 예제를 살펴볼까요?

<button id="myButton">클릭하세요</button>

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

📝 실행 결과:

버튼을 클릭하면 "버튼이 클릭되었습니다!" 라는 알림이 뜹니다.

---

⌨️ 키보드 이벤트 활용하기

사용자가 특정 키를 입력했을 때 동작하는 이벤트도 만들 수 있어요.

<input type="text" id="myInput" placeholder="문자를 입력하세요">

<script>
  document.getElementById("myInput").addEventListener("keydown", function(event) {
    console.log(`입력한 키: ${event.key}`);
  });
</script>

📝 실행 결과:

입력창에 키보드를 누르면 콘솔에 입력한 키가 출력됩니다.

---

🔄 마우스 이벤트 활용하기

마우스가 요소 위로 올라갔을 때(mouseover)와 벗어났을 때(mouseout) 배경색을 바꾸는 예제를 만들어볼까요?

<div id="hoverBox" style="width: 200px; height: 100px; background-color: lightgray; text-align: center; line-height: 100px;">
  마우스를 올려보세요!
</div>

<script>
  const box = document.getElementById("hoverBox");

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

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

📝 실행 결과:

• 마우스를 올리면 배경색이 노란색으로 변경!
• 마우스를 떼면 다시 원래 색상으로 돌아감.

---

📢 이벤트 리스너 제거하기 (removeEventListener)

이벤트 리스너를 제거하려면 removeEventListener를 사용해야 해요. 하지만 익명 함수를 사용하면 제거할 수 없어요! 따라서 함수를 변수로 저장하는 것이 중요합니다.

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

<script>
  function handleClick() {
    alert("클릭 이벤트 발생!");
  }

  document.getElementById("stopButton").addEventListener("click", handleClick);

  // 3초 후 이벤트 제거
  setTimeout(function() {
    document.getElementById("stopButton").removeEventListener("click", handleClick);
    alert("이벤트 리스너가 제거되었습니다!");
  }, 3000);
</script>

📝 실행 결과:

3초 내에 버튼을 클릭하면 알림이 뜨지만, 이후에는 이벤트가 사라져 더 이상 클릭해도 반응이 없습니다.

---

🏆 이벤트 위임(Event Delegation)

많은 요소에 이벤트를 개별적으로 추가하는 것은 비효율적이에요. 부모 요소에 이벤트를 걸어놓고, 자식 요소에서 발생한 이벤트를 감지하는 방법을 사용할 수 있어요.

<ul id="menu">
  <li>항목 1</li>
  <li>항목 2</li>
  <li>항목 3</li>
</ul>

<script>
  document.getElementById("menu").addEventListener("click", function(event) {
    if (event.target.tagName === "LI") {
      alert(`"${event.target.textContent}" 항목이 클릭되었습니다!`);
    }
  });
</script>

📝 실행 결과:

각 <li> 항목을 클릭하면 해당 항목의 텍스트가 알림창으로 표시됩니다.

💡 이벤트 위임의 장점:

• 새로운 <li>가 추가되어도 이벤트를 다시 추가할 필요 없음!
• 성능이 더욱 최적화됨!

---

😊 마무리하며..

이벤트 리스너(addEventListener)를 활용하면 웹페이지의 사용자 경험을 대폭 향상시킬 수 있어요!
오늘 배운 내용을 활용해서 재미있는 인터랙션을 만들어보세요 🚀

📌 오늘 배운 핵심 요약

1. addEventListener로 이벤트를 추가할 수 있음
2. removeEventListener로 이벤트를 제거 가능
3. 키보드, 마우스, 클릭 이벤트 등 다양한 이벤트 활용 가능
4. 이벤트 위임을 활용하면 성능을 최적화할 수 있음