Jieunny의 블로그

Unit 10. [JS/브라우저] 이벤트 객체 본문

CodeStates/learning contents

Unit 10. [JS/브라우저] 이벤트 객체

Jieunny 2022. 12. 28. 09:34

📣 이벤트 객체

✔️ 이벤트 : 클릭하거나 드래그 하는 일

 

📣 클릭에 따라 나오는 텍스트가 달라지는 브라우저

1️⃣ HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="style.css">
  <title>Document</title>
</head>
<body>
  <button class="americano">아메리카노</button>
  <button class="cafelatte">카페라떼</button>

  <script src="script.js"></script>
</body>
</html>

 

2️⃣ JS

let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

for(let i=0; i<menus.length; i++){
  menus[i].onclick = handleClick;
}

function handleClick(event) {
  console.log(event.target.innerHTML + '를 클릭하셨습니다.');
}

➰ event객체는 사용자의 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체

➰ DOM과 관련된 이벤트가 발생하면 관련 정보는 모두 event객체에 저장된다.

이벤트 발생 요소, 이벤트 타입, 이벤트 관련 데이터 등

➰ event.target 은 이벤트가 발생한 요소를 반환해준다.

아메리카노 버튼 누르면 <button class="americano">아메리카노</button> 이 담긴다.

 

저작자표시

'CodeStates > learning contents' 카테고리의 다른 글

Unit 11. 페이지 네이션 & 웹 스토리지  (0) 2023.01.04
Section 1. [기술 면접]  (0) 2022.12.29
Unit 10. [JS/DOM] 유효성 검사  (0) 2022.12.27
Unit 10. [JS/브라우저] DOM 기초  (0) 2022.12.26
Unit 9. [JS]ES6 주요문법  (0) 2022.12.23
'CodeStates/learning contents' Related Articles more