자바스크립트 이벤트 리스너(Event Listener) 기초 배우기

 

 

안녕하세요! 오늘은 자바스크립트에서 이벤트 리스너(Event Listener) 를 사용하여 HTML 요소와 상호작용하는 방법을 배운 내용을 정리해보겠습니다. 특히, addEventListener() 메서드를 활용하여 클릭 이벤트를 감지하는 방법을 중심으로 살펴보겠습니다.

---

1. 이벤트 리스너(Event Listener)란?

이벤트 리스너는 사용자의 행동(클릭, 마우스 이동, 키보드 입력 등)을 감지하고 특정 기능을 실행하는 역할을 합니다. 예를 들어, 사용자가 버튼을 클릭했을 때 해당 요소의 스타일을 변경하거나 콘솔에 메시지를 출력할 수 있습니다.

---

2. addEventListener()를 사용한 이벤트 감지

자바스크립트에서 이벤트를 감지하는 가장 일반적인 방법은 addEventListener() 메서드를 사용하는 것입니다.

📌 기본 문법

element.addEventListener("event", function);

• element: 이벤트를 감지할 HTML 요소
• event: 감지할 이벤트 종류 (예: click, mouseover, keydown 등)
• function: 이벤트 발생 시 실행할 함수

---

3. 클릭 이벤트 감지 예제

🔹 HTML 코드

<div class="hello">
    <h1>Click me!</h1>
</div>

🔹 JavaScript 코드

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    console.log("title was clicked");
}

title.addEventListener("click", handleTitleClick);

실행 결과

• 사용자가 <h1> 요소를 클릭하면, 브라우저 콘솔에 "title was clicked" 라는 메시지가 출력됩니다.

📝 코드 설명

1. document.querySelector("div.hello:first-child h1")를 사용하여 특정 <h1> 요소를 선택합니다.
2. handleTitleClick이라는 함수를 정의하여 클릭 이벤트가 발생하면 콘솔에 메시지를 출력하도록 설정합니다.
3. title.addEventListener("click", handleTitleClick);을 사용하여 클릭 이벤트를 감지하고 실행하도록 만듭니다.

---

4. 버튼 클릭 시 스타일 변경하기

이벤트 리스너를 활용하면 클릭 시 스타일을 변경하는 것도 가능합니다.

🔹 JavaScript 코드

const title = document.querySelector("div.hello:first-child h1");

function handleTitleClick() {
    title.style.color = "blue";
}

title.addEventListener("click", handleTitleClick);

실행 결과

• 사용자가 <h1>을 클릭하면 텍스트 색상이 파란색(blue) 으로 변경됩니다.

---

5. 여러 개의 이벤트 감지하기

하나의 요소에 여러 개의 이벤트 리스너를 추가할 수도 있습니다.

🔹 예제 코드

function handleMouseEnter() {
    console.log("Mouse is over the title");
}

function handleMouseLeave() {
    console.log("Mouse left the title");
}

title.addEventListener("mouseenter", handleMouseEnter);
title.addEventListener("mouseleave", handleMouseLeave);

실행 결과

• 마우스를 <h1> 위에 올리면 "Mouse is over the title" 메시지가 콘솔에 출력됩니다.
• 마우스를 <h1>에서 벗어나면 "Mouse left the title" 메시지가 출력됩니다.

---

오늘 배운 내용을 정리하면:

✅ addEventListener()를 사용하면 HTML 요소에서 이벤트를 감지할 수 있다.
✅ 클릭, 마우스 이동, 키보드 입력 등 다양한 이벤트를 감지할 수 있다.
✅ 클릭 이벤트를 활용하여 스타일을 변경하거나 특정 동작을 수행할 수 있다.
✅ 하나의 요소에 여러 개의 이벤트 리스너를 추가할 수도 있다.

이제 여러분도 다양한 이벤트 리스너를 활용하여 인터랙티브한 웹페이지를 만들어보세요! 😊