코드스테이츠 프론트엔드 부트캠프 17일차

2023-05-03(수) 

Unit 10 - [JS/브라우저] DOM

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

과제 유효성 검사 진행

 

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter 3. 이벤트 객체

이벤트 객체란 

= 웹 사이트를 서핑하다 보면, 이미지나 카드를 클릭하거나 드래그하는 일들을 이벤트라고 하고

이러한 기본적인 이벤트를 알고, 이벤트 핸들러를 구현합니다.

 

 

학습 목표

• 기초적인 event를 알고, event handler를 element에 적용할 수 있다.
• onclick에 직접 할당하는 것과 addEventListener의 차이를 이해한다.
• eventHandler 함수를 만들고, eventHandler의 첫 번째 인자를 사용할 수 있다.

 

-----------------------------------------------------------------------------------------------------------------------------------------------------------------

Chapter 3-1. 이벤트 객체 기초

let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

let btnAmericano = menus[0];
let btnCaffelatte = menus[1];

btnAmericano.onclick = handleClick;
btnCaffelatte.onclick = handleClick; // for 문으로도 충분히 구현할 수 있는 내용입니다.

function handleClick() {
  // 아래의 빈칸(____)을 채우세요.
  let currentMenu = ____; // TODO
  console.log(currentMenu + "를 클릭하셨습니다.");
}

사용자가 버튼을 클릭하면, 그 버튼의 textContent(또는 innerHTML)을 이용해 메뉴의 이름을 가져올 수 있습니다. 사용자가 누른 버튼에 따라 출력되는 이름이 달라지므로, 클릭된 이벤트 객체에서 메뉴의 이름을 가져옵니다.

 

이벤트 객체는 사용자 입력(onclick, onkeyup, onscroll 등)을 트리거로 발생한 이벤트 정보를 담은 객체입니다.

 

function handleClick(event) {
  console.log(event); // <-- 어떤 내용이 콘솔에 출력되나요?

  // let currentMenu = ____; // TODO
  // console.log(currentMenu + '를 클릭하셨습니다.');
}

[코드] 이벤트 객체를 출력하도록 코드를 변경하세요.

 

위에서는 매개변수 event를 통해 인자를 가져오도록 이벤트 핸들러를 변경하였다
console.log(event)를 해보면 다음과 같이 나온다

PointerEvent {isTrusted: true, pointerId:1, width:1, height:1, pressure:0…}

→ 상세 내용 중
target: 아메리카노
srcElement: 아메리카노
해당 부분이 버튼에 대한 텍스트 정보를 가지고 있으므로

 

let menus = document.querySelectorAll("button"); //모든 버튼을 가져옵니다.

      let btnAmericano = menus[0];

      let btnCaffelatte = menus[1];

      function handleClick() {

        // 아래의 빈 칸(____)을 채우세요.

        // console.log("working?");

        let currentMenu = ____; // TODO

        console.log(currentMenu + "를 클릭하셨습니다.");

      }

      btnAmericano.onclick = handleClick;

      btnCaffelatte.onclick = handleClick;

      // 이상으로 for 문으로 충분히 구현할 수 있는 내용입니다.

      function handleClick(event) {

        console.log(event); // <-- 어떤 내용이 콘솔에 출력되나요?

     

         let currentMenu = this.textContent; // TODO

         console.log(currentMenu + '를 클릭하셨습니다.');

      }

현재 메뉴의 이름을 가져오려면 

-> this를 이용하면 된다.

 

사용자가 버튼을 클릭하면 그 버튼의 textConent(또는 innerHTML)을 이용해서 메뉴의 이름을 가져 옴
누른 버튼에 따라 이름이 달라지므로 클릭한 이벤트 객체(this)에서 메뉴의 이름을 가져오는 것
 
→ 이벤트 객체: 사용자 입력(onclick, onkeyup 등)을 트리거로 발생한 이벤트 정보를 담은 객체