❓ 웹에서 이벤트를 사용하는 이유
1️⃣ 이벤트란 무엇이고 왜 사용할까?
웹 사이트가 처음 등장했을 때, 그 목적은 단순히 정보를 보여주는 것이었다. 하지만 시간이 지나면서 사용자와 상호작용하는 웹 애플리케이션의 수요가 높아졌다. 사용자는 단순히 글이나 이미지를 보기만 하는 것이 아니라, 직접 버튼을 클릭하거나, 스크롤을 움직이고, 데이터를 입력하는 등의 다양한 행동을 통해 웹과 상호작용하기를 원했다.
그래서 등장한 것이 "이벤트" 이다.
이벤트는 웹 페이지에서 사용자의 행동을 감지하고 그에 반응하는 메커니즘이다. 버튼을 클릭하거나 텍스트를 입력하는 등의 상호작용을 통해 웹 페이지가 즉각적으로 반응하도록 만들어준다. 예를 들어, 버튼을 클릭하면 팝업 창이 열리거나, 입력 필드에 값을 넣으면 실시간으로 해당 값이 반영되는 방식이다.
2️⃣ 이벤트의 기본 개념
이벤트는 쉽게 말하면, 사용자와의 상호작용을 가능하게 하는 장치이다. 페이지는 사용자의 행동을 감지하고, 이에 따라 특정 작업을 수행할 수 있다.
예를 들어,
- 마우스 클릭 이벤트: 사용자가 웹 페이지에서 특정 요소를 클릭했을 때 발생한다. (예: 버튼 클릭 시 데이터를 제출하거나, 특정 작업을 실행하도록 할 수 있음)
- 키보드 입력 이벤트: 사용자가 키보드의 특정 키를 누르거나 놓을 때 발생한다. (예: 로그인 화면에서 비밀번호 보이기 등 특정 UI 기능을 제공할 때 사용됨)
- 스크롤 이벤트: 페이지나 특정 요소에서 스크롤이 발생할 때 실행된다. (예: 페이지 하단에 도달할 때 추가 데이터를 로드하거나, 스크롤 위치에 따라 특정 요소의 모양을 변경할 때 사용됨)
3️⃣ 자바스크립트에서 이벤트 사용하기
JavaScript 에서는 addEventListener 를 사용해 특정 요소에 이벤트를 등록할 수 있다.
예를 들어, 텍스트가 있는 <div> 요소를 클릭할 때 배경색을 바꾸는 동작을 설정할 수 있다.
<body>
<div class="box">클릭해보세요!</div>
<script>
const box = document.querySelector('.box');
box.addEventListener('click', () => {
// 현재 배경색이 회색이면 파란색으로, 그렇지 않으면 다시 회색으로 변경
box.style.backgroundColor = box.style.backgroundColor === 'lightgray' ? 'lightblue' : 'lightgray';
});
</script>
</body>
위 코드는 .box 클래스를 가진 <div> 요소를 클릭할 때마다 회색과 파란색으로 번갈아 바뀌게 한다.
이런식으로 addEventListener 를 사용해 동적으로 반응하게 만들 수 있다.
🚀 예제
<body>
<div class="container">
<button id="mouse-btn">마우스 이벤트 버튼</button>
<input type="text" id="keyboard-input" placeholder="키보드를 눌러보세요" />
<p id="output"></p>
</div>
<script src="script.js"></script>
</body>// 마우스 이벤트 예제
document.getElementById('mouse-btn').addEventListener('click', () => {
document.getElementById('output').textContent = '버튼이 클릭되었습니다!';
});
// 키보드 이벤트 예제
document.getElementById('keyboard-input').addEventListener('keyup', (event) => {
const length = event.target.value.length;
document.getElementById('output').textContent = `현재 글자 수: ${length}`;
});
위 코드는 버튼을 클릭할 때 텍스트를 변경하고, 키보드 입력마다 현재 입력된 글자 수를 실시간으로 보여준다.
📖 정리
웹에서 이벤트는 사용자와의 상호작용을 가능하게 하는 핵심 요소이다. 이벤트를 사용하면 웹 페이지는 사용자의 행동에 즉각적으로 반응하게 되며, 페이지를 더욱 동적이고 인터랙티브하게 만들어준다.
- 이벤트의 기본 개념: 사용자가 마우스 클릭, 키보드 입력 등을 통해 행동할 때 발생하며, 그에 맞는 반응을 웹 페이지가 실행하게끔 한다.
- 자바스크립트 이벤트 사용: addEventListner를 사용하여 특정 요소에 이벤트를 등록하고, 사용자가 상호작용할 때 그에 맞는 반응을 설정할 수 있다.
- 이러한 이벤트 시스템을 사용하면 단순히 정보를 보여주는 데서 끝나는 것이 아니라, 사용자의 입력에 따라 즉각적으로 반응하는 동적인 웹 페이지를 만들 수 있다.
💡 참고자료
https://ko.javascript.info/introduction-browser-events
브라우저 이벤트 소개
ko.javascript.info
'JavaScript' 카테고리의 다른 글
| [JS] 웹 페이지의 생명주기와 주요 이벤트 알아보기 (0) | 2024.11.18 |
|---|---|
| [JS] 브라우저 요소 사이즈 확인하기 (0) | 2024.11.11 |
| [JS] DOM 트리와 노드 (0) | 2024.09.18 |
