🍦Vanilla JS 8-(1) 이벤트 다루기 + 실습 예제 3개

kongmi 2023. 4. 1. 08:29

이벤트는 웹 브라우저와 사용자 사이에 상호작용이 발생하는 특정 시점을 의미 합니다.
이벤트가 발생하면 이벤트 종류에 따라 어떤 작업을 하거나 미리 등록한 함수를 호출하는 등의 조작을 자바스크립트로 지정할 수 있습니다.

이벤트 종류

1. 인라인 방식

<body>
  <button onclick="clickEvent()">인라인 방식</button>
  
  <script src="./230331_2_0_이벤트등록.js"></script>
</body>

// 1. 인라인 방식
function clickEvent() {
  alert("인라인 방식으로 구현된 함수가 호출 되었습니다!");
}

2. 이벤트 등록 메소드(addEventListener())

DOM에서 제공하는 addEventListener() 메소드를 사용해 이벤트를 등록할 수 있습니다.
가장 권장하는 방식입니다.

<노드>.addEventListener("<이벤트 타입>", <이벤트 함수>);

// ⭐️ 2. 이벤트 등록 메소드 방식
function eventFunc() {
  alert("이벤트 등록 메소드로 구현된 함수를 호출");
}
let regBtnEl = document.getElementById("reg_btn");
regBtnEl.addEventListener("click", eventFunc); // 콜백함수

실습문제(1) - 버튼 클릭하면 경고창 출력하기

<!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">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      gap: 10px;
    }
    .item {
      width: 150px;
      height: 60px;
      text-align: center;
      font-size: 1.5em;
      border-radius: 10px;
      box-shadow: 2px 2px 2px #000;
      color: #171717;
      font-weight: bold;
      border: none;
    }
    .item1 {
      background: rgb(53,168,0);
      background: radial-gradient(circle, rgba(53,168,0,1) 0%, rgba(238,238,238,1) 100%);
    }
    .item2 {
      background: rgb(255,100,0);
      background: radial-gradient(circle, rgba(255,100,0,1) 0%, rgba(238,238,238,1) 100%);
    }
    .item3 {
      background: rgb(147,0,255);
      background: radial-gradient(circle, rgba(147,0,255,1) 0%, rgba(238,238,238,1) 100%);
    }
  </style>
</head>
<body>
  <div class="container">
    <button class="item item1">Green</button>
    <button class="item item2">Orange</button>
    <button class="item item3">Purple</button>
  </div>

  <script src="./230331_2_1_실습문제.js"></script>
</body>
</html>

// 이벤트 등록 메소드 방식
const green_box = document.querySelector(".item1");
green_box.addEventListener("click", function() {
  alert("green!!");
});

const orange_box = document.querySelector(".item2");
orange_box.addEventListener("click", function() {
  alert("orange!!");
});

const purple_box = document.querySelector(".item3");
purple_box.addEventListener("click", function() {
  alert("purple!!");
});

실습문제(2) - 버튼 클릭하면 배경색 바꾸기

<!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">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      gap: 10px;
      justify-content: center;
      align-items: center;
    }
    .sub-container {
      display: flex;
      gap: 10px;
    }
    .box {
      width: 30%;
      height: 150px;
      border-radius: 20px;
      border: 1px solid #bdbcbc;
    }
    .item {
      width: 150px;
      height: 40px;
      text-align: center;
      border-radius: 10px;
      color: #fff;
      font-weight: bold;
      border: none;
    }
    .item1 {
      background-color: green;
    }
    .item2 {
      background-color: orange;
    }
    .item3 {
      background-color: purple;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="sub-container">
      <button class="item item1">Green</button>
      <button class="item item2">Orange</button>
      <button class="item item3">Purple</button>
    </div>
    <div class="box"></div>
  </div>

  <script src="./230331_2_2_실습문제.js"></script>
</body>
</html>

const green_box = document.querySelector(".item1");
green_box.addEventListener("click", function() {
  const box = document.querySelector(".box");
  box.style.background = "green";
});

const orange_box = document.querySelector(".item2");
orange_box.addEventListener("click", function() {
  const box = document.querySelector(".box");
  box.style.background = "orange";
});

const purple_box = document.querySelector(".item3");
purple_box.addEventListener("click", function() {
  const box = document.querySelector(".box");
  box.style.background = "purple";
});

실습문제(3) - 버튼 클릭시 상세 설명 표시 및 닫기

<!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">
  <title>Document</title>
  <style>
    * {
      margin: 0;
    }
    .container {
      width: 400px;
      margin: 30px auto;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .image {
      background-image: url("./찰리푸스.png");
      background-size: contain;
      background-repeat: no-repeat;
      width: 400px;
      height: 400px;
      position: relative;
    }
    .desc {
      display: none
    }
    #detail {
      border: 1px solid #c7c6c6;
      width: 30px;
      height: 30px;
      text-align: center;
      border-radius: 10px;
      background: rgb(238,174,202);
      background: radial-gradient(circle, rgba(238,174,202,1) 0%, rgba(238,238,238,1) 100%);
      color: #000;
      font-weight: bold;
      position: relative;
      left: -170px;
      top: -40px;
      opacity: 0.7;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="image"></div>
      <button id="detail">▼</button>
    <div class="desc">
      <h1>찰리 푸스(Charlie Puth)</h1>
      <p>2015년 See You Again이라는 메가 히트곡으로 빌보드에 등장한, 작곡과 프로듀싱 능력까지 겸비한 싱어송라이터이다. 미국 보스턴의 명문 버클리 음악대학 전액 장학생이다. 본래 2009년 9월부터 유튜버 셰인 도슨의 타이틀곡을 작곡하거나, 본인의 유튜브 페이지에 커버 곡 또는 오리지널 곡을 올리는 등 마이너한 유튜버였다. 현재 유튜브 공식 계정이 데뷔하기 전부터 사용해 오던 계정[5]인데, 가수로 데뷔를 하면서 예전에 올린 커버 및 오리지널 곡 영상들 중 두 개를 제외하고 본인 계정에서 볼 수 없게 되었다. 아마 비공개로 전환시킨 듯하다. 남아있는 두 영상 중 하나가 Sia의 Chandelier 커버 곡 영상으로, 하얀 민소매를 입고 평온하게 샤우팅 하는 찰리 푸스의 모습을 볼 수 있다.</p>
    </div>
  </div>

  <script src="./230331_2_3_실습문제.js"></script>
</body>
</html>

const detailBtn = document.querySelector("#detail");
detailBtn.addEventListener("click", function() {
  const desc = document.querySelector(".desc");
  console.log(desc);
  if(desc.style.display == 'none') {
    desc.style.display = 'block';
  } else desc.style.display = 'none';
});

저작자표시 비영리 변경금지 (새창열림)