웹페이지에서 발생하는 이벤트 대부분은 키보드 이벤트, 마우스 이벤트
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>JS with Codeit</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>keydown, click 이벤트에 대한 이벤트 핸들러 등록해보기
const myInput = document.querySelector('#myInput');
const myBtn = document.querySelector('#myBtn');
myInput.addEventListener('keydown', function)() {
console.log('keyboardEvent');
myInput.addEventListener('click', function)() {
console.log('MouseEvent');
이벤트에 대한 상세한 정보 필요
이벤트 발생 시 마우스 포인터 위치, 어떤 요소를 클릭했는지, 어떤 키를 눌렀는지 등
= 이벤트 객체 (event, e 로 표기하기도 함)
이벤트 핸들러의 첫 번째 파라미터에는 항상 이 이벤트 객체가 전달된다
복습~
이벤트 발생 시 구체적인 동작을 하도록 하는 함수 부분을 이벤트 핸들러라고 한다.
~
코드를 아래와 같이 수정하면 이벤트 객체 정보를 출력할 수 있음
function printEvent(event) {
console.log(event); }
myInput.addEventListener('keydown', printEvent);
myBtn.addEventListener('click', printEvent);
type : 이벤트의 종류
target : 이벤트가 발생한 해당 요소,
DOM 요소가 담겨있음 -> 이벤트 발생 시 요소를 수정하거나 참조할 때 유용
function printEvent(event) {
console.log(event);
event.target.style.color = 'red';}
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키) |
이 프로퍼티들은 자주 사용되는 프로퍼티일 뿐 이벤트 객체의 모든 프로퍼티가 아닙니다.
출처 : 코드잇
'개발 공부 일지 > JavaScript' 카테고리의 다른 글
| 자바스크립트 - 마우스 이벤트 (0) | 2024.07.17 |
|---|---|
| 자바스크립트 - 이벤트 버블링 / 캡쳐링 / 이벤트 위임 / 이벤트 방지 (1) | 2024.07.17 |
| 자바스크립트 - 이벤트 핸들러 등록하기 (0) | 2024.07.17 |
| 자바스크립트 - 스타일 다루기 (0) | 2024.07.16 |
| 자바스크립트 - HTML 속성 다루기 (0) | 2024.07.16 |
