이번 시간은 자바스크립트에서 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);
})

저작자표시 동일조건

'📺 Front End > -- JS & ES6+' 카테고리의 다른 글

[Javascript] Fetch API로 구현하는 Ajax 비동기 통신 (0)	2021.02.26
[Javascript] 자바스크립트에서 HTML DOM을 다루는 방법 (0)	2021.02.20
[Javascript] 자바스크립트에서 JSON 을 다루는 방법 (0)	2021.02.20
[Javascript-Core] 자바스크립트의 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해서 알아보자. (0)	2020.07.31
[Javascript-Core] 함수 내부에서의 this와 우회 방법 그리고 화살표 함수의 this (부제) :: JS에서 말하는 This에 정확한 의미와 다양한 상황에서의 this(3) (2)	2020.07.28

Wonit

[Javascript] 자바스크립트에서 HTML Element의 이벤트를 다루는 방법

학습 순서

이벤트 등록, 삭제하기

이벤트 등록하기

go 라는 버튼을 클릭하면 span 태그에 있는 내용을 콘솔로 출력하는 것이다.

이벤트 삭제하기

지금까지 배운 내용으로 Todo 리스트 만들어보기

구현 목록

기능 목록

프로젝트 세팅

'📺 Front End > -- JS & ES6+' 카테고리의 다른 글

댓글

티스토리툴바

[Javascript] 자바스크립트에서 HTML Element의 이벤트를 다루는 방법

학습 순서

이벤트 등록, 삭제하기

이벤트 등록하기

go 라는 버튼을 클릭하면 span 태그에 있는 내용을 콘솔로 출력하는 것이다.

이벤트 삭제하기

지금까지 배운 내용으로 Todo 리스트 만들어보기

구현 목록

기능 목록

프로젝트 세팅

'📺 Front End > -- JS & ES6+' 카테고리의 다른 글

관련글

댓글

티스토리툴바