Nyong's Blog
0%

201230_TIL(이벤트)

Posted on Edited on In

오늘 배운 것

이벤트

DOMContentLoaded

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!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>
      // // window가 모두 로드되면 실행한다.
      // window.onload = () => {
      //   document.querySelector('.foo').style.color = 'red';
      // };

      // DOM 생성이 완성되면 로드한다. (위 보다 빠르다.)
      document.addEventListener("DOMContentLoaded", () => {
        document.querySelector(".foo").style.color = "red";
      });
    </script>
  </head>
  <body>
    <div class="foo">test</div>
  </body>
</html>

TODO

웹사이트 방식

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      /* css로도 취소선 생성이 가능하다. */
      .todos > li > input[type="checkbox"]:checked + span {
        text-decoration: line-through;
      }
    </style>
  </head>

  <body>
    <form>
      <input class="input-todo" type="text" placeholder="enter todo!" />
      <!-- 버튼 타입을 버튼으로 지정하지 않으면 submit이 기본값 -->
      <button class="add">Add</button>
    </form>

    <ul class="todos"></ul>

    <script>
      const $form = document.querySelector("form");
      const $inputTodo = document.querySelector(".input-todo");
      // const $add = document.querySelector('.add'); // submit 버튼을 add로 대체
      const $todos = document.querySelector(".todos");

      const addTodo = () => {
        const { value } = $inputTodo;
        if (!value) return;

        // $todos.innerHTML += `<li>${value}</li>`;
        const $li = document.createElement("li");
        const $checkbox = document.createElement("input");
        const $span = document.createElement("span");
        const $remove = document.createElement("button");

        $checkbox.setAttribute("type", "checkbox");

        $span.textContent = value;
        $remove.classList.add("remove");
        $remove.textContent = "X";

        $li.appendChild($checkbox);
        $li.appendChild($span);
        $li.appendChild($remove);
        $todos.appendChild($li);

        $inputTodo.value = "";
        $inputTodo.focus();
      };

      // $add.onclick = addTodo;

      // $inputTodo.onkeyup = e => {
      //     if (e.key !== 'Enter') return;
      //     addTodo();
      // };

      $form.onsubmit = (e) => {
        e.preventDefault();
        addTodo();
      };

      // 부모요소에게 이벤트를 위임하였다. (remove list)
      $todos.onclick = (e) => {
        if (!e.target.classList.contains("remove")) return;
        e.target.parentNode.remove();
      };

      /*
        // check 시 취소선
        $todos.addEventListener('click', e => {
            e.target.checked ? e.target.nextSibling.style.textDecoration = 'line-through':e.target.nextSibling.style.textDecoration = 'none';
        });

        // click은 쓸모없는 마우스 좌표를 가져온다.
        // css로 할 수도 있다.
        $todos.onchange = ({ target }) => {
            target.nextSibling.style.textDecoration = target.checked ? 'line-through' : 'none';
        };
        */
    </script>
  </body>
</html>

TODO MVC 패턴(미완성)

서버로 데이터를 동기화할 때는 배열 자료구조를 통한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <form>
      <input type="text" class="input-todo" placeholder="enter todo!" />
      <button class="add">등록</button>
    </form>

    <ul class="todos">
      <!-- <li id="1">
      <input type="checkbox" checked>
      <span>HTML</span>
      <button class="remove">X</button>
    </li> -->
    </ul>
    <script>
      let todos = [];

      const $todos = document.querySelector(".todos");
      const $inputTodo = document.querySelector(".todos");

      const render = () => {
        $todos.innerHTML = todos
          .map(
            ({ id, content, completed }) => `<li id="${id}">
          <input type="checkbox" ${completed ? "checked" : ""}>
          <span>${content}</span>
          <button class="remove">X</button>
        </li>`
          )
          .join("");
      };

      const fetchTodos = () => {
        // TODO: 서버로부터 todos 데이터를 취득한다.(잠정 처리)
        todos = [
          { id: 1, content: "HTML", completed: true },
          { id: 2, content: "CSS", completed: true },
          { id: 3, content: "Javascript", completed: false },
        ];

        todos = [...todos].sort((todo1, todo2) => todo2.id - todo1.id);
        render();
      };

      const addTodo = (() => {
        const generateId = () => Math.max(...todos.map((todo) => todo.id)) + 1;

        return (content) => {
          todos = [
            {
              id: generateId(),
              content,
              completed: false,
            },
            ...todos,
          ];
          render();
        };
      })();

      const removeTodo = (id) => {
        todos = todos.filter((todo) => todo.id !== id);
        render();
      };

      document.addEventListener("DOMContentLoaded", fetchTodos);

      document.querySelector("form").onsubmit = (e) => {
        e.preventDefault();
        const content = $inputTodo.value;
        if (!content) return;

        addTodo(content);
        $inputTodo.value = "";
        $inputTodo.focus();
      };

      $todos.onclick = (e) => {
        if (!e.target.matches(".todos > li > button.remove")) return;

        removeTodo(+e.target.parentNode.id);
      };
    </script>
  </body>
</html>

Nyong’s GitHub