[SeSACXCodingOn] 웹풀스택과정 2W_06 _04: javascript Event

01. 이벤트란

javascript 에서 이벤트 (event) 란 어떤 사건을 의미합니다. 예를 들면 버튼클릭, 웹페이지 로드, 키가 눌렸을 때 발생할 일 등등 이런 이벤트에 "함수"를 등록하는 방법은 2가지 입니다. 

• HTML 상에서 onXXX 속성으로 등록하기 
• js에서 listener를 사용하여 등록하기

01-1 onXXX 속성으로 등록 

 
첫번째 방법으로 이벤트를 등록해보겠습니다. 

<h1 onclick="alert('제목 클릭')">js 이벤트</h1> <!-- 클릭 이벤트 -->

html에 다음을 입력하면 js 이벤트 텍스트를 가진 요소를 클릭하면 제목클릭이라는 텍스트를 가진 alert창이 나타납니다. 
 

02-1.addEventListener ('click', function (){});

 
addEventListener의 사용방법은 이렇습니다. 먼저 click 이벤트에 대해 예시로 보여드리겠습니다. 
 
[html]

  <div class="btn btn--black">버튼1</div>
    <div class="btn btn--green">버튼2</div>
    <div class="btn btn--blue">버튼3</div>
    <div class="btn btn--red">버튼4</div>
    <div id="container"></div>

 
[js]

const btn1 = document.querySelector('.btn--black');
const btn2 = document.querySelector('.btn--green');
const btn3 = document.querySelector('.btn--blue');
const btn4 = document.querySelector('.btn--red');
const container = document.getElementById('container');

각각의 변수에 먼저 요소를 넣어줍니다. 
 

//addEventListener(이벤트 종류, 이벤트가 발생했을 때 일어날 일 함수로 작성  )
btn1.addEventListener('click', function () {
  alert('버튼 1을 클릭하셨네요!');
});

위 이벤트는 btn1을 클릭하면 '버튼 1을 클릭하셨네요!' 라는 alert 창이 뜨게 됩니다. 
 

02-2.addEventListener ('mouseover', function (){});

 
다음은 마우스를 올렸을 때 발생하는 이벤트를 해보겠습니다.

btn1.addEventListener('mouseover', function () {
  btn1.style.backgroundColor = 'aqua';
});

마우스를 버튼 1에 올리면 배경색이 aqua로 변하게 해보았습니다. 
 

02-3.addEventListener ('mouseout', function (){});

하지만 한번 배경색이 바뀌고 마우스를 치워도 바뀐 배경색이 그대로 유지됩니다. 다시 원래대로 돌아가기 위해 마우스가 들어왔다가 나갔을때 발생하는 이벤트를 사용해 보겠습니다. 

btn1.addEventListener('mouseout', function () {
  btn1.style.backgroundColor = 'rgb(44,44,44)';
});

마우스가 나갔을 때 배경색이 다시 바뀌게 됩니다. 
 
 

02-4.addEventListener응용 

btn2를 클릭시 pink 배경색을 가지고 hi라는 텍스트를 가진 div요소를 클릭할때마다 추가할 수 있게 이벤트를 생성해 보겠습니다. 

btn2.addEventListener('click', () => {
  const div = document.createElement('div');
  div.style.backgroundColor = 'pink';
  div.innerHTML = 'HI!!!!!';
  container.append(div);
});

addEventListener는 익명함수 말고도 미리 만들어지는 함수도 넣을 수 있습니다. 

btn3.addEventListener('click', changeColor);

function changeColor() {
  const divs = document.querySelectorAll('#container div');
  for (let div of divs) {
    div.style.backgroundColor = 'skyblue';
  }
}

btn3을 클릭하면 changeColor라는 함수가 실행 되도록 작성 후 changeColor라는 함수를 밑에 선언해주었습니다. 
changeColor함수는 id가 container이가 div요소를 가진 유사배열을 가져와서 유사배열에서 반복을 돌면서 배경색들을 skyblue로 바꿔주는 함수 입니다. 
 

btn4.addEventListener('click', changeBtnColor);
function changeBtnColor() {
  console.log(this); //this -> 자기자신
  //   console.log(this.parentNode); // this를 이용해 부모 접근
  this.style.backgroundColor = 'yellow';
  this.style.color = '#000';
}

btn4를 클릭하면 changeBtnColor함수가 실행되도록 해보겠습니다. 
changeBtnColor 함수는 자기자신을 콘솔에 출력후 배경색을 yellow로 바꾸고 폰트색을 #000로 바꿉니다. 
 

03. 이벤트 객체 

이벤트가 발생하면 브라우저는 발생한 이벤트에 대한 정보를 담은 이벤트 객체 (event object)를 이벤트 리스너에 전달합니다. 예를 들어 mousedown 이벤트가 발생하면 이벤트 객체는 마우스 좌표, 버튼 번호가 됩니다. 만약 Keydown 이벤트가 발생한다면 이벤트 객체는 (키 코드값, 어떤 키가 눌렸는지에 대한 정보) 에 대한 정보들을 가지게 됩니다. 
 

03-1 키보드 이벤트 -keydown

 
[html]

const input = document.querySelector('input');

[js]

input.addEventListener('keydown', function (e) {
  //event e라고도 함
  console.log(e.code); // 눌려진 키의 고유 코드
  console.log(e.key); //input에 입력된 값

  if (e.code == 'ArrowUp') {
    console.log('⬆️'); //cmd + ctrl + space
  } else if (e.code === 'ArrowDown') {
    console.log('⬇️');
  } else {
    console.log('others');
  }
});

다음과 같이 작성하여 눌려진 키의 고유코드와 값 그리고 조건문으로 arrowup버튼과 arrowdown 버튼이 눌렸을 때 이모지가 나올 수 있도록 만들고 나머지를 입력한다면 others가 콘솔에 나오도록 해줬습니다. 
 

04. 폼이벤트 

 
[html]

    <h2>Todo list</h2>
    <form id="todo-form">
      <input type="text" name="todo" />
      <button>Add</button>
    </form>
    <ul class="todos"></ul>

[js]

const todoForm = document.getElementById('todo-form');
const todos = document.querySelector('.todos');

todoForm.addEventListener('submit', (e) => {
  console.log('submit');
  e.preventDefault(); //폼 submit 이벤트가 새로고침 되는 걸 막음
  // 폼 제출을 막음
  });

submit 이벤트가 발생하면 콘솔에 submit을 출력합니다. preventDefault는 폼의 submit 이벤트가 새로고침 되는것을 막습니다. 
 

const todoForm = document.getElementById('todo-form');
const todos = document.querySelector('.todos');

todoForm.addEventListener('submit', (e) => {
  console.log('submit');
  e.preventDefault(); //폼 submit 이벤트가 새로고침 되는 걸 막음
  // 폼 제출을 막음
  
   const todoInput = document.querySelector('input[name="todo"]');
  //   console.log(todoInput);
  //   console.dir(todoInput);
  //   console.log(todoInput.value); // input에 입력된 값

  const newTodo = todoInput.value.trim(); //공백 제거

  if (newTodo !== '') {
    const newTodoLi = document.createElement('li'); // <li></li>
    newTodoLi.append(newTodo); // <li>input입력값</li>
    todos.append(newTodoLi);
  }

  //input 창 초기화
  todoInput.value = '';
  });

input 속성에 name이 todo 인 요소를 선택하고 todoInput 변수에 넣습니다. 이 input 요소에 입력된 값들에 공백을 제거한 값을 새로운 변수인 newTodo에 할당해주고 조건문 안에 <li>태그를 가진 요소를 만들어 다시 변수 newTodoLi에 할당해줍니다. 이 빈 <li>태그에 공백이 제거된 input의 값을 append 해주고 todos클래스에 append 해줍니다. 이 조건문은 입력한 값인 newTodo가 공백이 아닐때 실행되며 마지막에 input창의 값(value)를 공백으로 초기화해줍니다. 
 

05. 변경이벤트 

 
[html]

 <h2>변경 이벤트</h2>
    <input type="text" id="change-input" />
    <div class="intro"></div>

[js]

//change : input 요소에 변경이 일어나고, 다른 요소를 클릭해서
//input 이 포커스 아웃(blur) 처리되었을 때 일어나는 이벤트
const chgInput = document.querySelector('#change-input');
chgInput.addEventListener('change', function (e) {
  console.log('change!!!', e.target.value);
});

id가 change-input인 요소를 변수 chgInput 에 할당하고 이 변수에 change 이벤트가 발생하면 change!!! 가 출력됩니다. 
 

//input에 변경이 감지될때마다 이벤트
chgInput.addEventListener('input', function () {
  console.log('changing!!');
  const div = document.querySelector('.intro');
  div.textContent = this.value; //실시간 텍스트 동기화
});

 chgInput에 input이벤트가 발생하면 changing!!이 출력되고 intro클래스를 가진 div요소에 입력값이 실시간으로 동기화 됩니다. 
 

+실습 간단계산기 만들기 

 

간단 계산기 만들기

 
solution)
[html]

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>간단 계산기 만들기</title>
    <script defer src="./cal.js"></script>
  </head>
  <body>
    <div class="container">
      <div class="value">
        <span>값 1 :</span>
        <input type="text" id="value1" />
      </div>
      <div class="value">
        <span>값 2 :</span>
        <input type="text" id="value2" />
      </div>
      <div class="value">
        <span>연산자 :</span>
        <input type="text" id="operator" />
      </div>
      <div class="value">
        <span>결과 :</span>
        <input type="text" id="result" />
      </div>
    </div>
    <br />
    <button class="cal">계산하기</button>
    <button class="zero">초기화</button>
  </body>
</html>

 
[js]

const calcul = document.querySelector('.cal');
calcul.addEventListener('click', cal);

function cal() {
  let value1 = Number(document.getElementById('value1').value.trim());
  let value2 = Number(document.getElementById('value2').value.trim());
  let operator = document.getElementById('operator').value;

  let result;

  if (operator === '+') {
    result = value1 + value2;
  } else if (operator === '-') {
    result = value1 - value2;
  } else if (operator === '*') {
    result = value1 * value2;
  } else if (operator === '/') {
    result = value1 / value2;
  } else if (operator === '%') {
    result = value1 % value2;
  } else {
    result = '연산자 입력이 잘못되었습니다. ';
  }
  document.getElementById('result').value = result;
}

const reset = document.querySelector('.zero');
reset.addEventListener('click', resetHandler);

function resetHandler() {
  document.getElementById('value1').value = '';
  document.getElementById('value2').value = '';
  document.getElementById('operator').value = '';
  document.getElementById('result').value = '';
}

// 처음에 result 값을 const로 선언해서 재할당이 안됬다.. 이 바보자식
//strict mode에서  변수 이름이랑 함수 이름을 똑같이 해서 오류떠서 헤맷다..,.,.,.,,네이밍 어려워잉,,
//처음에 value 1 , value2 의 value를 변수에 할당해서 계속 쓰려고 했는데
//버튼 클릭 시마다 그 값을 다시 읽는게 아니라 처음 한번만 값을 가져오기 때문에
//버튼 클릭시 항상 빈 값을 가지게 됨
 

+ 실습 방명록 만들기 

방명록만들기

solution]
[html]

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>방명록 만들기</title>
    <script defer src="guestBook.js"></script>

    <style>
      th,
      td {
        padding: 10px;
      }
    </style>
  </head>
  <body>
    <p>방명록입니다.</p>
    <form>
      <div>
        <label for="author">작성자</label>
        <input type="text" id="name" />
      </div>
      <div>
        <label for="con">내용</label>
        <input type="text" id="content" />
      </div>
      <br />
      <br />
      <button type="submit" id="submit">작성</button>
    </form>
    <br />

    <table border="2">
      <tr>
        <th>번호</th>
        <th>작성자</th>
        <th>내용</th>
        <th>작성일</th>
      </tr>
    </table>
  </body>
</html>

[js]

const btn = document.getElementById('submit');

let num = 1;

btn.addEventListener('click', (guest) => {
  guest.preventDefault();
  const author = document.getElementById('name').value;
  const content = document.getElementById('content').value;
  const date = new Date();
  const year = date.getFullYear();
  const month = date.getMonth() + 1;
  const day = date.getDay();
  const hour = date.getHours();
  const min = date.getMinutes();

  const table = document.querySelector('table');
  //기존 내용과 새로운 내용을 합친 새로운 내용을 씀
  table.innerHTML += `<tr> 
  <td>${num}</td>
  <td>${author}</td>
  <td>${content}</td>
  <td>${year}-${month}-${day} ${hour} : ${min} </td></tr>`;

  num++;

  document.getElementById('name').value = '';
  document.getElementById('content').value = '';
});