[JavaScript]_Event Object

hanseungjune·2022년 6월 26일

목록 보기

77/87

✅ 이벤트 객체란?

이벤트 발생 시, 이벤트가 발생한 위치(target), 이벤트 발생 타입(type) 등을 프로퍼티 형태로 콘솔 창에 보여줄 수 있게 하는 것을 말한다.

☑️ 이벤트 객체 예시

<!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>

// 이벤트 객체
const myInput = document.querySelector('#myInput');
const myBtn = document.querySelector('#myBtn');

function printEvent(event) {
  console.log(event);
  event.target.style.color = "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키)

이 프로퍼티들은 자주 사용되는 프로퍼티일 뿐 이벤트 객체의 모든 프로퍼티가 아닙니다.

- 참고자료

이벤트

마우스 이벤트

키보드 이벤트

✅ 이벤트 객체를 활용한 ToDoList 설정하기

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>오늘 할 일</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="main">
    <h2 class="title">오늘 할 일</h2>
    <ul id="to-do-list" class="to-do-list">
      <li>자바스크립트 공부하기</li>
      <li>고양이 화장실 청소하기</li>
      <li>고양이 장난감 쇼핑하기</li>
    </ul>
  </div>
  <script src="index.js"></script>
</body>
</html>

body {
  margin: 0;
  padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.main {
	width: 350px;
	margin: 40px;
  padding: 30px 0;
  background-color: #FCFCFC;
  box-shadow: -5px -5px 20px #DFDFDF,  5px 5px 20px #BABECC;
  border-radius: 8px;
  text-align: center;
}

.title {
	margin: 15px auto;
	font-size: 30px;
	font-weight: 600;
	color: #9600FF;
}

#to-do-list {
  width: 280px;
	margin: 0 auto 15px;
	padding: 0;
	list-style: none;
}

#to-do-list li {
	display: flex;
	align-items: center;
	justify-content: center;
  width: 90%;
  height: 40px;
	margin: 8px auto 15px;
	border-bottom: 1px solid #9600FF;
	cursor: pointer;
}

.done {
  opacity: 0.5;
  text-decoration: line-through;
}

const toDoList = document.querySelector('#to-do-list');
const items = toDoList.children;

// 1. updateToDo 함수를 완성해 주세요.
function updateToDo(event) {
  event.target.classList.toggle('done');
}

// 2. 반복문을 활용해서 각 li태그에 이벤트 핸들러를 등록해 주세요.
for ( let i = 0 ; i < items.length ; i++ ) {
  items[i].addEventListener("click", updateToDo);
}

// 테스트 코드
items[2].removeEventListener("click", updateToDo);