๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
  • ์žฅ์›์ต ๊ธฐ์ˆ ๋ธ”๋กœ๊ทธ
๐Ÿ“บ Front End/- HTML,css,Javascript

[Javascript] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML Element์˜ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•

by Wonit 2021. 2. 20.

์ด๋ฒˆ ์‹œ๊ฐ„์€ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ HTML ์š”์†Œ์˜ ์ด๋ฒคํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š” ๋ฐฉ๋ฒ•๊ณผ Todolist๋ฅผ ๋งŒ๋“ค์–ด๋ณด๋ฉฐ ํ•™์Šตํ•˜๋Š” ์‹œ๊ฐ„์„ ๊ฐ–๋„๋ก ํ•˜๊ฒ ๋‹ค.

ํ•™์Šต ์ˆœ์„œ

  • ์ด๋ฒคํŠธ ๊ฐ์ฒด๋ž€?
  • ์ด๋ฒคํŠธ ๋“ฑ๋ก, ์‚ญ์ œํ•˜๊ธฐ
    • addEventListener()
    • removeEventListner()
  • ์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๋‚ด์šฉ์œผ๋กœ Todo ๋ฆฌ์ŠคํŠธ ๋งŒ๋“ค์–ด๋ณด๊ธฐ

์ด๋ฒคํŠธ ๋“ฑ๋ก, ์‚ญ์ œํ•˜๊ธฐ

์šฐ๋ฆฌ๋Š” ์ง€๋‚œ ์‹œ๊ฐ„ ๊นŒ์ง€ HTML Element๋ฅผ ๋“ฑ๋ก, ์ˆ˜์ •, ์‚ญ์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์— ๋Œ€ํ•ด ํ•™์Šตํ•˜์˜€๋‹ค.

์ด๋ฒˆ ์‹œ๊ฐ„์—๋Š” ์šฐ๋ฆฌ๊ฐ€ ์ง€๋‚œ๋ฒˆ์— ๋งŒ๋“  Element์— ์ด๋ฒคํŠธ๋“ค ๋“ฑ๋ก์‹œ์ผœ๋ณด๋Š” ์ผ์„ ํ•  ๊ฒƒ์ด๋‹ค.

์ด๋ฒคํŠธ ๋“ฑ๋กํ•˜๊ธฐ

์ด๋ฒคํŠธ๋ฅผ ๋“ฑ๋กํ•˜๊ธฐ ์œ„ํ•ด์„œ๋Š” addEventListener() ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ๋‹ค.

target.addEventListener(type, listener, useCapture);
  • target : ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ๋ฅผ ๋“ฑ๋กํ•  DOM ๊ฐ์ฒด
  • type : ์ด๋ฒคํŠธ ์œ ํ˜•์„ ์ง€์ •ํ•˜๋Š” ๋ฌธ์ž์—ด (click ์ด๋ฒคํŠธ๋ฉด "clicl", change ์ด๋ฒคํŠธ๋ฉด "chage")
  • listener : ์ด๋ฒคํŠธ๊ฐ€ ๋ฐœ์ƒํ–ˆ์„ ๋•Œ ์ฒ˜๋ฆฌ๋ฅผ ๋‹ด๋‹นํ•˜๋Š” ์ฝœ๋ฐฑ ํ•จ์ˆ˜
  • useCapture : ์ด๋ฒคํŠธ ๋‹จ๊ณ„

๊ธฐ๋ณธ์ ์ธ ์ŠคํŽ™๊ณผ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•์€ ์ด๋Ÿฌํ•˜๋‹ค.

๋ฐฑ๋ฌธ์ด ๋ถˆ์—ฌ์ผํƒ€๋ผ ์ด์ œ ์‹ค์ œ ์˜ˆ์ œ๋ฅผ ํ†ตํ•ด์„œ ์•Œ์•„๋ณด์ž.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <span id="username">Hello ์ œ ์ด๋ฆ„์€ JANG ์ž…๋‹ˆ๋‹ค.</span>
    <button id="btn">go</button>
  </body>
</html>

์œ„์™€ ๊ฐ™์ด 2 ๊ฐœ์˜ ํƒœ๊ทธ๋กœ ๊ตฌ์„ฑ๋œ HTML ํŒŒ์ผ์ด ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ•ด๋ณด์ž.

์šฐ๋ฆฌ๊ฐ€ ํ•˜๊ณ ์‹ถ์€ ๊ฒƒ์€ ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

go ๋ผ๋Š” ๋ฒ„ํŠผ์„ ํด๋ฆญํ•˜๋ฉด span ํƒœ๊ทธ์— ์žˆ๋Š” ๋‚ด์šฉ์„ ์ฝ˜์†”๋กœ ์ถœ๋ ฅํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

const mySpan = document.getElementById("username");
const myBtn = document.getElementById("btn");

myBtn.addEventListener("click", () => {
  console.log(mySpan.value);
});

๊ทธ๋Ÿผ ์šฐ๋ฆฌ๊ฐ€ ์›ํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์ž˜ ๊ตฌํ˜„๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ด๋ฒคํŠธ ์‚ญ์ œํ•˜๊ธฐ

์ด๋ฒคํŠธ๋ฅผ ์‚ญ์ œํ•˜๋Š” ๋ฐฉ๋ฒ•์—๋Š” removeEventListener๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์žˆ๋‹ค.

target.removeEventListener(type, listener, useCapture);

์ธ์ˆ˜๋Š” addEventListener๊ณผ ๋™์ผํ•˜๋‹ค.
removeEventListener๋ฅผ ์‚ฌ์šฉํ•  ๋•Œ ์ต๋ช… ํ•จ์ˆ˜๋‚˜ ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋กœ ๋“ฑ๋ก๋œ ์ด๋ฒคํŠธ๋Š” ์‚ญ์ œํ•  ์ˆ˜ ์—†์ง€๋งŒ ์ด๋ฒคํŠธ ๋ฆฌ์Šค๋„ˆ ๋‚ด๋ถ€์—์„œ removeEventListener๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด ์‚ญ์ œํ•  ์ˆ˜ ์žˆ๋‹ค.
์ด ๋•Œ์—๋Š” listener์— arguments.callee๋ฅผ ๋„˜๊ธด๋‹ค.

์ด๋ฒคํŠธ ์‚ญ์ œํ•˜๊ธฐ๋Š” ์ž์ฃผ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ด ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์ด๋ฒˆ ๊ธ€์˜ ๋ชฉ์ ์— ๋งž๊ฒŒ ์—ฌ๊ธฐ๊นŒ์ง€๋งŒ ์„ค๋ช…ํ•˜๋„๋ก ํ•˜๊ฒ ๋‹ค.

์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๋‚ด์šฉ์œผ๋กœ Todo ๋ฆฌ์ŠคํŠธ ๋งŒ๋“ค์–ด๋ณด๊ธฐ

์ง€๊ธˆ๊นŒ์ง€ ๋ฐฐ์šด ๋‚ด์šฉ์œผ๋กœ Todo List๋ฅผ ๋งŒ๋“ค์–ด๋ณด์ž.

์šฐ๋ฆฌ์˜ todo ๋ฆฌ์ŠคํŠธ์—๋Š” ์–ด๋–ค ๋‚ด์šฉ๋“ค์ด ๋“ค์–ด๊ฐ€์•ผ ํ• ์ง€ ๋จผ์ € ์ƒ๊ฐํ•ด๋ณด์ž.

๊ตฌํ˜„ ๋ชฉ๋ก

  • ์ œ๋ชฉ
  • ํˆฌ๋‘ ์•„์ดํ…œ ์ž…๋ ฅ ํผ
  • ํˆฌ๋‘ ์•„์ดํ…œ ๋“ฑ๋ก ๋ฒ„ํŠผ
  • ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ ๋ Œ๋”๋ง

๊ธฐ๋Šฅ ๋ชฉ๋ก

  • Todo Item ๋“ฑ๋ก

ํ”„๋กœ์ ํŠธ ์„ธํŒ…

์šฐ์„  ํ”„๋กœ์ ํŠธ ๋””๋ ‰ํ† ๋ฆฌ๋ฅผ ํ•˜๋‚˜ ์ƒ์„ฑํ•˜๊ณ  ๊ทธ ์•„๋ž˜์—

index.html

index.js ํŒŒ์ผ์„ ์ƒ์„ฑํ•œ๋‹ค.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <script src="./index.js"></script>
  </body>
</html>

์—ฌ๊ธฐ์„œ script ํƒœ๊ทธ์˜ ์œ„์น˜๊ฐ€ ์กฐ๊ธˆ ์ค‘์š”ํ•œ๋ฐ, body ํƒœ๊ทธ๊ฐ€ ๋๋‚˜๊ธฐ ๋ฐ”๋กœ ์ „์— ์œ„์น˜ํ•ด์•ผ ํ•œ๋‹ค.

๊ทธ๋ฆฌ๊ณ  ๋‹ค์Œ๊ณผ ๊ฐ™์ด HTML ํƒœ๊ทธ๋ฅผ ์ด์šฉํ•ด์„œ ํˆฌ๋‘ ๋ฆฌ์ŠคํŠธ ํผ์„ ๋งŒ๋“ค์–ด๋ณด์ž.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Hello world</title>
  </head>
  <body>
    <div>Todo List</div>
    <div>
      <input
        id="todo-form"
        type="text"/>
      <button id="todo-button">๋“ฑ๋ก</button>
    </div>
    <div id="todo-list"></div>
    <script src="./index.js"></script>
  </body>
</html>

๊ทธ๋ฆฌ๊ณ  js ํŒŒ์ผ์—์„œ ๊ฐ๊ฐ Dom ๊ฐ์ฒด๋ฅผ ๊ฐ€์ ธ์˜ค์ž

const input = document.getElementById("todo-form");
const button = document.getElementById("todo-button");
const todoList = document.getElementById("todo-list");

Todo Item์ด๋ผ๋Š” HTML Element๋ฅผ <div id="todo-list" /> ํƒœ๊ทธ ์•„๋ž˜์— ์ถ”๊ฐ€ํ•˜๋Š” ์ด๋ฒคํŠธ๋ฅผ ์ƒ์„ฑํ•ด์•ผ ํ•œ๋‹ค.

html ์—˜๋ฆฌ๋จผํŠธ๋ฅผ ์ถ”๊ฐ€ํ•˜๊ธฐ ์œ„ํ•ด์„œ appendChild ๋ฉ”์„œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜์˜€๋‹ค.

button.addEventListener("click", (e) => {
  let todoItem = document.createElement("li");
  todoList.appendChild(todoItem);
})

์ด์ œ input์— ์žˆ๋Š” value๋ฅผ li ํƒœ๊ทธ์˜ text value๋กœ ๋„ฃ์–ด๋ณด์ž.

button.addEventListener("click", (e) => {
  let todoItem = document.createElement("li");

  todoItem.innerText = input.value;
  input.value = "";
  todoList.appendChild(todoItem);
})

 

 

๋Œ“๊ธ€