1. 이벤트
자바스크립트에서 이벤트(Event)는 사용자가 웹 페이지와 상호작용할 때 발생하는 특정 동작이나 상황을 의미합니다. 예를 들어 버튼 클릭, 키보드 입력, 마우스 이동, 폼 제출, 창 닫기 등이 모두 이벤트에 해당하며, 이러한 이벤트에 대해 자바스크립트가 특정 반응(동작)을 하도록 코드를 작성할 수 있습니다. 이를 위해 addEventListener() 같은 메서드를 사용해 특정 요소에 이벤트 리스너를 등록하거나, HTML 요소에 직접 onclick, onchange 같은 이벤트 속성을 사용할 수 있습니다. 이벤트는 사용자와의 실시간 상호작용을 처리하는 데 필수적이며, 동적인 웹 페이지를 만드는 핵심 요소로 작동합니다.
1. HTML 이벤트 속성 방식
<button onclick="sayHello()">인사하기</button>
<script>
function sayHello() {
alert("안녕하세요!");
}
</script>
2. DOM 속성 방식 (element.onclick)
<button id="btn">누르세요</button>
<script>
const btn = document.getElementById("btn");
btn.onclick = function () {
alert("버튼이 클릭되었습니다!");
};
</script>
3. addEventListener() 방식
<button id="eventBtn">이벤트 리스너 사용</button>
<script>
const eventBtn = document.getElementById("eventBtn");
eventBtn.addEventListener("click", function () {
alert("addEventListener로 연결된 이벤트입니다.");
});
// 같은 요소에 다른 이벤트도 추가 가능
eventBtn.addEventListener("mouseenter", function () {
eventBtn.style.backgroundColor = "lightblue";
});
</script>
주요 이벤트 종류
2. 이벤트 객체
이벤트 객체(Event Object)는 자바스크립트에서 이벤트가 발생했을 때 브라우저가 자동으로 생성하여 이벤트 핸들러 함수에 전달하는 정보 덩어리입니다. 이 객체에는 이벤트의 종류(type), 이벤트가 발생한 대상(target), 마우스 위치(clientX, clientY), 눌린 키(key), 기본 동작 제어 메서드(preventDefault()), 이벤트 전파 제어 메서드(stopPropagation() 등 다양한 속성과 메서드가 담겨 있습니다. 이벤트 핸들러 함수에서 매개변수로 event를 받아 사용할 수 있으며, 이를 통해 사용자의 행동에 더 정밀하게 반응할 수 있습니다. 예를 들어 사용자가 어떤 버튼을 클릭했는지, 어떤 키를 눌렀는지, 입력 필드를 어떻게 조작했는지를 이벤트 객체를 통해 알아내고 처리할 수 있습니다. 이 객체는 동적이고 인터랙티브한 웹 페이지를 구현하는 데 매우 중요한 역할을 합니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>이벤트 객체</title>
<style>
#clickArea {
width: 300px;
height: 150px;
background-color: #f0f0f0;
border: 1px solid #aaa;
line-height: 150px;
text-align: center;
margin-bottom: 20px;
}
</style>
</head>
<body>
<h2>이벤트 객체를 확인해보세요</h2>
<div id="clickArea">여기를 클릭하세요</div>
<input type="text" id="inputBox" placeholder="키보드를 눌러보세요" />
<script>
// 1. 마우스 클릭 시 이벤트 객체 확인
document.getElementById("clickArea").addEventListener("click", function(event) {
alert(
`클릭한 위치 (좌표): X=${event.clientX}, Y=${event.clientY}\n` +
`이벤트 타입: ${event.type}\n` +
`이벤트 대상 ID: ${event.target.id}`
);
});
// 2. 키보드 입력 시 이벤트 객체 확인
document.getElementById("inputBox").addEventListener("keydown", function(event) {
console.log("입력된 키:", event.key);
console.log("코드:", event.code);
console.log("이벤트 발생한 요소:", event.target);
});
// 3. 기본 동작 막기 예제 (Enter 키 막기)
document.getElementById("inputBox").addEventListener("keypress", function(event) {
if (event.key === "Enter") {
event.preventDefault(); // 엔터키 눌러도 form 제출 같은 동작 안 함
alert("Enter 키는 막아두었어요!");
}
});
</script>
</body>
</html>
'프론트엔드 > JavaScript' 카테고리의 다른 글
| JSON (0) | 2025.04.16 |
|---|---|
| 정규식 (0) | 2025.04.16 |
| Document Object Model (0) | 2025.04.15 |
| Browser Object Model (1) | 2025.04.15 |
| 내장 객체 (1) | 2025.04.15 |