JavaScript - addEventListener(): 당신의 상호작용 웹 페이지로의 문턱

안녕하세요, 미래의 JavaScript 마법사 여러분! 오늘 우리는 웹 개발 도구 키트에서 가장 강력한 도구 중 하나를 배울 것입니다: addEventListener() 메서드. 이 튜토리얼의 끝까지 따라오면, 여러분의 웹 페이지가 여러분의 곡에 춤을 추게 할 수 있을 것입니다!

JavaScript - addEventListener()

addEventListener()는 무엇인가요?

코드로 뛰어들기 전에 addEventListener()이 정확히 무엇을 하는지 이해해 보겠습니다. 상상해 보세요, 당신이 파티(웹 페이지)에 있고, 누군가(사용자)가 특정한 행동을 했을 때, 예를 들어 문을 두드리는 것(버튼을 클릭하는 것)을 알고 싶어할 때. addEventListener() 메서드는 그 문 앞에 서서 기다리는 신뢰할 수 있는 집사처럼, 그 두드림을 기다렸다가 그것을 알려주어 당신이 행동을 취할 수 있게 해줍니다.

JavaScript 용어로는, addEventListener()은 HTML 요소에서 특정 이벤트를 듣고 그에 대한 사용자 정의 기능을 반응하는 데 사용됩니다.

문법

기본 문법을 살펴보겠습니다:

element.addEventListener(event, function, useCapture);

각 부분의 의미는 다음과 같습니다:

element: 이벤트를 연결하고 싶은 HTML 요소.
event: 듣고 싶은 이벤트 유형을 지정하는 문자열 (예: "click", "mouseover").
function: 이벤트가 발생했을 때 실행할 함수.
useCapture: 선택 사항으로, 나중에 다룰 것입니다.

이제 그것을 실제로 보겠습니다!

예제

1. 클릭 이벤트의 고전적인 예

가장 흔한 예제로 시작해 보겠습니다: 버튼 클릭에 응답하는 것.

HTML:

<button id="myButton">Click me!</button>

JavaScript:

// 먼저, 버튼에 대한 참조를 가져옵니다
const button = document.getElementById("myButton");

// 이제, 'click' 이벤트에 대한 이벤트 리스너를 추가합니다
button.addEventListener("click", function() {
alert("Button clicked!");
});

이 예제에서 우리는 JavaScript가 버튼에서 'click' 이벤트를 듣도록 지시하고 있습니다. 그 일이 발생하면 경고 창을 표시합니다. 간단하지 않나요?

2. 호버 시 스타일 변경

이제 좀 더 흥미로운 걸 해보겠습니다. 마우스가 요소 위에 있을 때 요소의 스타일을 변경합니다.

HTML:

<div id="colorBox" style="width: 100px; height: 100px; background-color: blue;">
Hover over me!
</div>

JavaScript:

const box = document.getElementById("colorBox");

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

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

여기서 우리는 두 개의 이벤트 리스너를 사용하고 있습니다: 하나는 'mouseover' (마우스가 요소에 진입했을 때)와 다른 하나는 'mouseout' (마우스가 요소를 벗어났을 때)입니다. this를 사용하여 이벤트가 연결된 요소를 참조하는 것에 유의하세요.

3. 폼 검증

이제 실용적인 걸 시도해 보겠습니다: 기본 폼 검증.

HTML:

<form id="myForm">
<input type="text" id="nameInput" placeholder="Enter your name">
<button type="submit">Submit</button>
</form>

JavaScript:

const form = document.getElementById("myForm");
const nameInput = document.getElementById("nameInput");

form.addEventListener("submit", function(event) {
if (nameInput.value.trim() === "") {
event.preventDefault(); // 폼 제출을 방지합니다
alert("Please enter your name!");
}
});

이 스크립트는 폼의 'submit' 이벤트를 듣습니다. 이름 입력이 비어 있으면 폼을 제출하지 않고 경고를 표시합니다. event 매개변수에 유의하세요 - 이는 이벤트 객체에 접근하여 preventDefault()와 같은 메서드를 사용할 수 있게 해줍니다.

4. 키보드 이벤트

키보드 이벤트를 탐구하기 위해 간단한 게임을 만들어 보겠습니다. 정확한 키를 눌러야 합니다.

HTML:

<div id="gameArea">
Press the correct key!
<p id="targetKey"></p>
<p id="message"></p>
</div>

JavaScript:

const targetKey = document.getElementById("targetKey");
const message = document.getElementById("message");
let currentKey = "";

function setNewTarget() {
currentKey = String.fromCharCode(65 + Math.floor(Math.random() * 26));
targetKey.textContent = `Target key: ${currentKey}`;
}

document.addEventListener("keydown", function(event) {
if (event.key.toUpperCase() === currentKey) {
message.textContent = "Correct! Well done!";
setNewTarget();
} else {
message.textContent = "Oops! Try again!";
}
});

setNewTarget(); // 게임을 시작합니다

이 스크립트는 랜덤한 타겟 키를 설정하고 전체 문서에서 'keydown' 이벤트를 듣습니다. 눌린 키가 타겟 키와 일치하면 메시지를 표시하고 새로운 타겟을 설정합니다.

이벤트 유형

듣을 수 있는 이벤트 유형은 많습니다. 다음은 일부 일반적인 유형입니다:

이벤트 유형	설명
click	요소가 클릭됨
mouseover	마우스가 요소에 진입함
mouseout	마우스가 요소를 벗어남
keydown	키가 눌림
keyup	키가 떼임
submit	폼이 제출됨
load	페이지나 이미지가 로드 완료됨
change	입력 요소의 값이 변경됨
focus	요소가 포커스를 얻음
blur	요소가 포커스를 잃음

결론

이제 여러분은 addEventListener()의 힘을 풀어냈습니다! 이 지식을 가지면, 사용자 행동에 실시간으로 반응하는 동적인 웹 페이지를 만들 수 있습니다.

기억하시길, 이(와 다른 프로그래밍 개념)를 마스터하려면 연습이 중요합니다. 다양한 이벤트를 결합해 보고, 다양한 HTML 요소를 실험하고, 가장 중요한 것은 즐겁게 만들어 보세요!

누가 알랄까요?也许下一个大型互动网站就是由你使用今天学到的技能建造的。快乐的编码를 하고, 당신의 이벤트 리스너들이 항상 주의 깊게 듣기를 바랍니다!

Credits: Image by storyset