본문 바로가기
프론트엔드/JavaScript

[JavaScript] 이벤트 리스너

개발자이오 2024. 6. 4. 20:21
반응형

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>
    <script defer src="./index.js"></script>
  </head>
  <body>
    <button>클릭</button>
  </body>
</html>


const btnEl = document.querySelector("button");
console.log(btnEl); // null
btnEl.addEventListener("click", function () {
  alert("졸러요😴 선생님");
});

이벤트 타겟을 찾지 못하여 클릭되지 않습니다.

defer 속성을 붙여줘서 html 파싱 후 인터랙션이 되도록 하여 이벤트 타겟을 제대로 찾았는지 확인합니다.

 

`addEventListener` 메서드 사용

예제1) 컬러피커

* {
  box-sizing: border-box;
}
html {
  display: table;
  width: 100%;
  height: 100%;
}
body {
  text-align: center;
  display: table-cell;
  vertical-align: middle;
  padding: 1em;
  background: #f5f5f5;
  font: 100%/1.2 "Helvetica Neue";
  font-weight: 200;
  transition: all 0.5s;
}
.colorPicker {
  margin-top: 1em;
  font-size: 0.875em;
  text-align: center;
  display: inline-table;
  width: 100%;
  max-width: 40em;
  background: #fff;
  padding: 2px;
  border-radius: 0.35em;
  box-shadow: 0 0.5em 1.5em rgba(0, 0, 0, 0.15);
}
.colorPicker label {
  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.5);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
  display: table-cell;
  cursor: pointer;
  vertical-align: middle;
  padding: 0.5em 1em;
  text-transform: capitalize;
  letter-spacing: -0.5em;
  color: transparent;
  opacity: 0.35;
  width: 1%;
  background-image: -webkit-gradient(
    linear,
    left top,
    left bottom,
    from(rgba(255, 255, 255, 0.1)),
    to(rgba(0, 0, 0, 0.1))
  );
  background-image: linear-gradient(
    rgba(255, 255, 255, 0.1),
    rgba(0, 0, 0, 0.1)
  );
}
.colorPicker label.red {
  background-color: #ff3e05;
  -webkit-tap-highlight-color: #ff3e05;
}
.colorPicker label.orange {
  background-color: #ff8d05;
  -webkit-tap-highlight-color: #ff8d05;
}
.colorPicker label.yellow {
  background-color: #ecca05;
  -webkit-tap-highlight-color: #ecca05;
}
.colorPicker label.green {
  background-color: #40af04;
  -webkit-tap-highlight-color: #40af04;
}
.colorPicker label.blue {
  background-color: #057fff;
  -webkit-tap-highlight-color: #057fff;
}
.colorPicker label.indigo {
  background-color: #7500ca;
  -webkit-tap-highlight-color: #7500ca;
}
.colorPicker label.violet {
  background-color: #cc6fcc;
  -webkit-tap-highlight-color: #cc6fcc;
}
.colorPicker label:first-of-type {
  border-radius: 0.25em 0 0 0.25em;
}
.colorPicker label:last-of-type {
  border-radius: 0 0.25em 0.25em 0;
}
.colorPicker label:hover {
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}
.colorPicker input {
  display: none;
}
.colorPicker input:checked + label {
  width: 90%;
  opacity: 1;
  color: #fff;
  letter-spacing: normal;
}

index.html

 

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Color Picker</title>
    <meta
      name="viewport"
      content="initial-scale=1.0, user-scalable=no, width=device-width"
    />
    <link href="style.css" rel="stylesheet" />
    <script defer src="main.js"></script>
  </head>
  <body>
    <h1>Color Picker</h1>
    <p>HTML/CSS-only color picker concept.</p>
    <div class="colorPicker">
      <input
        class="red"
        type="radio"
        name="hat-color"
        value="red"
        id="hat-color-red"
      />
      <label class="red" for="hat-color-red">red</label>

      <input
        class="orange"
        type="radio"
        name="hat-color"
        value="orange"
        id="hat-color-orange"
      />
      <label class="orange" for="hat-color-orange">orange</label>

      <input
        class="yellow"
        type="radio"
        name="hat-color"
        value="yellow"
        id="hat-color-yellow"
      />
      <label class="yellow" for="hat-color-yellow">yellow</label>

      <input
        class="green"
        type="radio"
        name="hat-color"
        value="green"
        id="hat-color-green"
      />
      <label class="green" for="hat-color-green">green</label>

      <input
        class="blue"
        type="radio"
        name="hat-color"
        value="blue"
        id="hat-color-blue"
      />
      <label class="blue" for="hat-color-blue">blue</label>

      <input
        class="indigo"
        type="radio"
        name="hat-color"
        value="indigo"
        id="hat-color-indigo"
      />
      <label class="indigo" for="hat-color-indigo">indigo</label>

      <input
        class="violet"
        type="radio"
        name="hat-color"
        value="violet"
        id="hat-color-violet"
      />
      <label class="violet" for="hat-color-violet">violet</label>
    </div>
  </body>
</html>

index.css

 

const input = document.querySelectorAll("input");

input.forEach((element) => {
  element.addEventListener("click", function () {
    document.body.style.backgroundColor = this.value; // this는 element
  });
});

main.js

 

예제2) 토글

 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>onclick Javascript event</title>
    <link rel="stylesheet" href="./style.css" />
    <script defer src="./script.js"></script>
  </head>

  <body>
    <div class="flex--container">
      <h1 class="headline">My name is</h1>
      <span class="display--row">
        <!-- 1.클릭하면 show display :none, myname display: block -->
        <!-- 2.다시 클릭하면 1번의 과정의 반대 -->
        <p class="show" id="show">Show it Now!</p>
        <p class="myname" id="myname">dev.EO</p>
      </span>
    </div>
    <!-- partial -->
  </body>
</html>

index.html

 

@import url("<https://fonts.googleapis.com/css?family=Oswald>");
@import url("<https://fonts.googleapis.com/css?family=EB+Garamond>");
body {
  margin: 0;
  padding: 0;
  background: #2d3047;
}
body .flex--container {
  height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #ffffff;
}
body .flex--container .display--row {
  background: #e0ca3c;
  margin-left: 10px;
  cursor: pointer;
  padding: 3px;
  animation: shake 0.8s infinite alternate;
}

.headline {
  font-size: 26px;
  font-family: "Oswald", sans-serif;
  font-weight: 900;
  text-transform: uppercase;
}

.display--row .show {
  color: #000;
  font-family: EB Garamond;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 10px;
}

.display--row .myname {
  display: none;
  color: #000;
  font-size: 24px;
  font-weight: 900;
  text-transform: uppercase;
  margin: 0 10px;
  font-family: EB Garamond;
}

@keyframes shake {
  0% {
    transform: translateX(-5px);
  }
  25% {
    transform: translateX(5px);
  }
  50% {
    transform: translateX(-3px);
  }
  75% {
    transform: translateX(3px);
  }
  100% {
    transform: translateX(0px);
  }
}

index.css

 

const display = document.querySelector(".display--row");
const show = document.getElementById("show");
const myname = document.getElementById("myname");

function toggle(element1, element2) {
  element1.style.display = "none";
  element2.style.display = "block";
}

display.addEventListener("click", () => toggle(show, myname));
display.addEventListener("click", () => toggle(myname, show));

main.js

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

'프론트엔드 > JavaScript' 카테고리의 다른 글

[JavaScript] 비동기  (1) 2024.06.04
[JavaScript] 클래스  (0) 2024.06.03

'프론트엔드/JavaScript' Related Articles

티스토리툴바