이벤트(Event)
1. 이벤트(Event)
- JavaScript에서 이벤트에 대해 알아봅시다!
- 이벤트(Event)란? 사용자 상호 작용 or 웹 페이지의 상태 변화와 같은 다양한 동작을 처리하는 데 사용됩니다.
- 이벤트는 일종의 신호로, 웹 페이지 or 애플리케이션에서 어떤 일이 발생했음을 알리는 역할을 합니다.
- 이벤트는 함수(핸들러)를 연결시켜 활동 발생 시, 동작(트리거)하게 합니다.
2. 이벤트 핸들러 종류
- 대표적인 DOM 이벤트 핸들러의 종류는 다음과 같습니다.
1) click
- 요소를 마우스 왼쪽 버튼으로 눌렀을 때, 발생합니다.
- 예를 들어, 다음과 같이 +1 버튼을 클릭 시, 숫자가 1씩 증가하게 할 수 있습니다.
See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_1)click by NewBean0312 (@newbean0312) on CodePen.
2) mouseover
- 마우스 커서가 요소 위로 들어왔을 때, 발생합니다.
- 예를 들어, 다음과 같이 글씨에 마우스를 올리면, 색이 변하게 할 수 있습니다.
See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_1)click by NewBean0312 (@newbean0312) on CodePen.
3) mouseout
- 마우스 커서가 요소 밖으로 나갔을 때, 발생합니다.
- 예를 들어, 전의 코드에서 마우스를 올리면 색이 변하는데, 마우스를 떼면 색이 돌아오게 할 수 있습니다.
See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_3)mouseover by NewBean0312 (@newbean0312) on CodePen.
4) focus
- 요소에 포커스를 했을 때, 발생합니다.
- 예를 들어, 다음과 같이 input 태그에 focus 시, 자동 입력이라는 글씨가 나오게 할 수 있습니다.
See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_4)mouseout by NewBean0312 (@newbean0312) on CodePen.
5) change
- 내부 값이 바뀌었을 때, 발생합니다.
- 예를 들어, 다음과 같이 input 태그의 값이 div 태그에 출력되게 할 수 있습니다.
See the Pen Tistory_Front-End Study_JavaScript_이벤트_2.이벤트핸들러 종류_5)focus by NewBean0312 (@newbean0312) on CodePen.
6) blur
- 요소가 포커스를 잃었을 때, 발생합니다.
7) keydown
- 키보드를 눌렀을 때, 발생합니다.
8) keyup
- 키보드를 뗴었을 때, 발생합니다.
9) drag
- 요소가 드래그 되었을 때, 발생합니다.
※ 여기서 번외로 addEventListener 함수로 이벤트를 처리할 수 있습니다. index.html과 main.js에 다음과 같이 입력하고 실행해 봅시다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<span id="test">test</span>
<script src="./main.js"></script>
</body>
</html>
main.js
const test = document.getElementById("test");
new Array(10).fill(0).forEach((_, index) => {
test.addEventListener("click", () => {
console.log(`test clicked ${index + 1}`);
});
});
결과
→ test clicked 1,2,3, ... 처럼 console.log가 10번 출력되는 것을 확인할 수 있습니다.
3. 이벤트 버블링(Event Bubbling)
- 이번엔 이벤트 버블링에 대해 알아봅시다.
- 이벤트 버블링(Event Bubbling)이란? HTML 요소에서 발생한 이벤트가 해당 요소의 부모 요소들로 전파되는 현상을 말합니다.
- 이벤트 버블링은 HTML 요소 트리의 구조를 따라 위로 올라가며 발생합니다.
- 예를 들어, index.html과 main2.js에 다음과 같이 입력한 후, 버튼을 클릭해 봅시다.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div id="button-wrapper">
<div id="button-subWrapper">
<button id="count-up-button">+1</button>
</div>
</div>
<span>0</span>
<script src="./main.js"></script>
<script src="./main2.js"></script>
</body>
</html>
main2.js
const button = document.getElementById("count-up-button");
const buttonWrapper = document.getElementById("button-wrapper");
const buttonSubWrapper = document.getElementById("button-subWrapper");
button.onclick = () => {
console.log("button event triggered");
};
buttonWrapper.onclick = () => {
console.log("wrapper event triggered");
};
buttonSubWrapper.onclick = () => {
console.log("subWrapper event triggered");
};
결과
→ 다음과 같이 3개가 동시에 나오는 것을 확인할 수 있습니다.
- 이처럼 되지 않기 위해 main2.js에서 event.stopPropagation( );을 입력해 주면, button.onclick(...)만 실행되게 됩니다.
const button = document.getElementById("count-up-button");
const buttonWrapper = document.getElementById("button-wrapper");
const buttonSubWrapper = document.getElementById("button-subWrapper");
button.onclick = (event) => {
event.stopPropagation();
console.log("button event triggered");
};
buttonWrapper.onclick = () => {
console.log("wrapper event triggered");
};
buttonSubWrapper.onclick = () => {
console.log("subWrapper event triggered");
};
3. 정리하며
- 지금까지 이벤트에 대해 알아보았습니다.
- 이벤트 핸들러를 잘 활용하면, 코드가 더 간결해지고 유연한 이벤트 처리가 가능해집니다.
※ Git 주소
JavaScript-study/입문자를 위한 자바스크립트 실습/웹 프론트 언어로서 자바스크립트/4. 이벤트 at mai
Contribute to NewBean0312/JavaScript-study development by creating an account on GitHub.
github.com
'Front-End Study > JavaScript' 카테고리의 다른 글
| 네트워크 요청 (0) | 2024.03.25 |
|---|---|
| 에러 핸들링(Error Handling) (0) | 2024.03.24 |
| 브라우저 객체 (0) | 2024.03.24 |
| DOM (0) | 2024.03.22 |
| 디버깅(Debugging) (0) | 2024.03.21 |
