▼HTML, JavaScript 문서
<!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="content" class="btns">
<input type="text" id="myInput" placeholder="type anything">
<button id="myBtn">click me!</button>
</div>
<script src="index.js"></script>
</body>
</html>// 이벤트 객체 (Event Object)
const myInput = document.querySelector("#myInput");
const myBtn = document.querySelector("#myBtn");사용자가 키보드와 마우스를 통해서 컴퓨터의 모든 동작을 다루기 때문에
웹 페이지에서 일어날 수 있는 이벤트도 대부분 키보드, 마우스 이벤트로 이루어진다.
키보드로 제어할 수 있는 대표적인 이벤트인 '키다운'과
마우스로 제어할 수 있는 대표적인 이벤트인 '클릭'의 이벤트 핸들러를 등록해보자
// 이벤트 객체 (Event Object)
const myInput = document.querySelector("#myInput");
const myBtn = document.querySelector("#myBtn");
myInput.addEventListener("keydown", function () {
console.log("키보드 이벤트");
});
myBtn.addEventListener("click", function () {
console.log("마우스 이벤트");
});
이벤트를 좀 더 제대로 다루기 위해서는 이벤트에 대한 상세한 정보가 필요하다.
클릭 이벤트가 발생했다면 정확히 어떤 요소를 클릭했는지,
클릭한 시점에 마우스 포인터의 위치는 어디였는지,
키보드 이벤트가 발생했다면 어떤 키를 눌렀는지 등 이러한 정보가 필요하다.
웹 페이지에서 어떤 이벤트가 발생하면
그 이벤트와 관련된 다양한 정보를 담고 있는 이벤트 객체가 자동으로 만들어진다.
또한 이벤트 핸들러의 첫 번째 파라미터는 이벤트 객체가 전달되는데, 예시를 보자면 다음과 같다.
// 이벤트 객체 (Event Object)
const myInput = document.querySelector("#myInput");
const myBtn = document.querySelector("#myBtn");
function printEvent(e) {
console.log(e);
}
myInput.addEventListener("keydown", printEvent);
myBtn.addEventListener("click", printEvent);파라미터에 이름을 넣어주거나 일반적으로 알파벳 e를 사용하기도 한다.
이름이 어찌됐건 이벤트 핸들러가 되는 함수의 첫 번째 파라미터는 무조건 이벤트 객체가 전달된다.
코드를 보면 키다운 이벤트가 발생할 때도 이벤트 객체가 출력이 되고
클릭 이벤트가 발생할 때도 이벤트 객체가 콘솔에 출력될 것이다.
이벤트를 한번 펼쳐보면 굉장히 많은 프로퍼티를 가지고 있는걸 볼 수 있는데
공통적으로 자주 사용되는 프로퍼티는 'type' 과 'target' 프로퍼티이다.
'type'은 말 그대로 발생한 이벤트의 타입을 담고 있고
'target'은 이벤트가 발생한 그 해당 요소를 담고 있다.
특히 'target'은 dom 요소가 담겨져 있기 때문에
아래와 같이 이벤트가 발생했을 때 해당 요소를 수정한다거나
혹은 그 요소가 가지고 있는 속성 값 들을 참조해야 되는 상황에서 유용하게 활용될 수 있다.
// 이벤트 객체 (Event Object)
const myInput = document.querySelector("#myInput");
const myBtn = document.querySelector("#myBtn");
function printEvent(e) {
console.log(e);
e.target.style.color = "red"; //target - 글자 색상 red
}
myInput.addEventListener("keydown", printEvent);
myBtn.addEventListener("click", printEvent);
이 밖에도 다양한 각 이벤트 별로 자주 사용되는 프로퍼티들이 더 있는데
이벤트 객체의 각 프로퍼티들을 한 번에 외우려고 하지말고
필요한 상황에 따라 검색하여 하나씩 정보를 얻어 알아가는게 좋다.
▼자주 사용하는 이벤트 객체의 프로퍼티
1. 공통 프로퍼티
아래의 프로퍼티들은 이벤트 타입과 상관없이 모든 이벤트 객체들이 공통적으로 가지고 있는 프로퍼티이다.
| type | 이벤트 이름 ('click', 'mouseup', 'keydown' 등) |
| target | 이벤트가 발생한 요소 |
| currentTarget | 이벤트 핸들러가 등록된 요소 |
| timeStamp | 이벤트 발생 시각(페이지가 로드된 이후부터 경과한 밀리초) |
| bubbles | 버블링 단계인지를 판단하는 값 |
2. 마우스 이벤트
마우스와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들을 가지고 있다.
| button | 누른 마우스의 버튼 (0: 왼쪽, 1: 가운데(휠), 2: 오른쪽) |
| clientX, clientY | 마우스 커서의 브라우저 표시 영역에서의 위치 |
| pageX, pageY | 마우스 커서의 문서 영역에서의 위치 |
| offsetX, offsetY | 마우스 커서의 이벤트 발생한 요소에서의 위치 |
| screenX, screenY | 마우스 커서의 모니터 화면 영역에서의 위치 |
| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
3. 키보드 이벤트
키보드와 관련된 이벤트의 경우에는 아래와 같은 이벤트 객체의 프로퍼티들을 가지고 있다.
| key | 누른 키가 가지고 있는 값 |
| code | 누른 키의 물리적인 위치 |
| altKey | 이벤트가 발생할 때 alt키를 눌렀는지 |
| ctrlKey | 이벤트가 발생할 때 ctrl키를 눌렀는지 |
| shiftKey | 이벤트가 발생할 때 shift키를 눌렀는지 |
| metaKey | 이벤트가 발생할 때 meta키를 눌렀는지 (window는 window키, mac은 cmd키) |
이렇게 웹 페이지에서 이벤트가 발생하면 관련된 정보를 담은 이벤트 객체가 만들어지고
이벤트 핸들러의 첫 번째 파라미터로 전달되는 개념을 알아봤다.
▶GitHub
JavaScript_soloPlay/interactive_JS/14.이벤트객체 at main · SeopE9611/JavaScript_soloPlay
Contribute to SeopE9611/JavaScript_soloPlay development by creating an account on GitHub.
github.com
'JS' 카테고리의 다른 글
| (16) Interactive JavaScript (Event) - 이벤트 위임 (0) | 2024.11.08 |
|---|---|
| (15) Interactive JavaScript (Event) - 이벤트 버블링 (0) | 2024.11.07 |
| (13) Interactive JavaScript (Event) - 이벤트 핸들러 등록하기 (0) | 2024.11.06 |
| (12) Interactive JavaScript - 비표준 속성 (0) | 2024.11.05 |
| (11) Interactive JavaScript - Style (0) | 2024.10.16 |