🍦Vanilla JS 8-(2) 이벤트 객체와 this + 영화 예매 프로그램

PointerEvent 속성

KeyboardEvent 객체 확인

keyCode => key

const btnEl = document.querySelector("button");
btnEl.addEventListener("click", function(e) {
  console.log("버튼이 눌려졌습니다." + e);
  console.log("x좌표 : " + e.clientX);
  console.log("y좌표 : " + e.clientY);
  console.log("마우스가 클릭된 x 좌표 : " + e.pageX);
  console.log("마우스가 클릭된 y 좌표 : " + e.pageY);
  console.log("모니터의 왼쪽 모서리 기준으로 마우스가 클릭된 x 좌표 : " + e.screenX);
  console.log("모니터의 왼쪽 모서리 기준으로 마우스가 클릭된 y축 좌표 : " + e.screenY);
});

const inputEl = document.querySelector("input");
inputEl.addEventListener("keydown", function(event) {
  console.log(`key : ${event.key}`);
  console.log(`ctrlKey : ${event.ctrlKey}`);
  console.log(`altKey : ${event.altKey}`);
  console.log(`shiftKey : ${event.shiftKey}`);
});

이벤트 취소하기

HTML 태그 중 일부는 기본으로 이벤트가 적용되어 있습니다.
대표적으로 a 태그와 form 태그가 해당 됩니다.
target 속성은 이벤트가 발생한 요소를 나타냅니다. (React에서 확인 예정)
preventDefault() 메소드를 사용하면 태그에 기본으로 연결된 이벤트를 취소할 수 있습니다.

form 태그에 addEventListner() 걸 때 정보를 서버에 전달하기 위해 사용할 때 기본으로 연결된 이벤트를 취소해줘야 함.

const aEls = document.querySelectorAll("a");
for(let e of aEls) {
  e.addEventListener("click", function(event) {
    // 기본 이벤트 취소
    event.preventDefault();
  });
}

const formEl = document.getElementById("myForm");
formEl.addEventListener("submit", function(event) {
  // 기본 이벤트 취소
  event.preventDefault(); // 폼 제출 기본 동작 막기
});

this 키워드 사용하기

이벤트 함수 내부에서 this 키워드를 사용하면 이벤트가 발생한 요소 노드를 바로 가리킬 수 있습니다.
(이벤트를 받은 html 요소)

const pEls = document.querySelectorAll("#p1");
const pEls2 = document.querySelectorAll("#p2");
// for(let el of pEls) {}; 과 pEls.forEach((el) => {});은 같다.
pEls.forEach((el) => {
  el.addEventListener("click", function() {
    if(this.style.color === "red") { // 여기서의 this는 현재 이벤트가 눌려진 요소
      this.style.color = "black";
    } else this.style.color = "red";
  });
});

pEls2.forEach((el) => {
  el.addEventListener("click", () => {
    if(el.style.color === "red") {
      el.style.color = "black";
    } else el.style.color = "red";
  });
});

this 키워드 사용시 주의 할 점!
이벤트 함수를 화살표 함수로 작성하면 this의 범위가 달라져서 this가 이벤트 발생 노드를 가리키지 않습니다.
(원래 addEventListener()의 콜백함수에서는 this에 해당 이벤트가 리스너가 호출된 엘리먼트가 바인딩 되도록 정의되어 있습니다. 이처럼 이미 this의 값이 정해져 있는 콜백 함수의 경우, 화살표 함수를 사용하면 기존 바인딩 값이 사라지고 상위 스코프가 바인딩 되기 때문에 의도했던 대로 동작하지 않을 수 있습니다.)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <p id="p1">text-1</p>
  <p id="p1">text-2</p>
  <p id="p1">text-3</p>
  <br>
  <p id="p2">test-1</p>
  <p id="p2">test-2</p>
  <p id="p2">test-3</p>

  <script src="./230403_이벤트this.js"></script>
</body>
</html>

실습 예제 - 영화관 예매

메뉴는 [1] 예매하기 [2] 정산하기
사용자로부터 좌석번호를 입력 받아 예매하는 시스템이다. (좌석은 총 10개)
이미 예매가 완료된 좌석은 재구매 불가
한 좌석당 가격은 12000원
[정산하기] 클릭시 해당 영화관의 총 매출액 출력

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="./230403_3_영화표예매.css">
  <title>Document</title>
</head>
<body>
  <h1>🌮 예매 시스템 🍿</h1>
  <div class="button-container">
    <button id="reserve">예매하기</button>
    <button id="quit">정산하기</button>
  </div>
  <div id="seat">
    <div class="seatInput">
      <label for="seatNum">좌석 번호</label>
      <input type="text" id="seatNum">
      <button type="submit" id="reserveBtn">예매</button>
    </div>
    <div class="seat-container">
      <div class="seat-item 1"></div>
      <div class="seat-item 2"></div>
      <div class="seat-item 3"></div>
      <div class="seat-item 4"></div>
      <div class="seat-item 5"></div>
      <div class="seat-item 6"></div>
      <div class="seat-item 7"></div>
      <div class="seat-item 8"></div>
      <div class="seat-item 9"></div>
      <div class="seat-item 10"></div>
    </div>
  </div>
  <h1 id="result"></h1>
  <script src="./230403_3_영화표예매.js"></script>
</body>
</html>

* {
  box-sizing: border-box;
}
body {
  width: 100%;
}
#seat {
  display: none;
}
.seatInput {
  display: flex;
  margin: 20px 0;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.button-container {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: center;
}
.button-container button {
  width: 80px;
  height: 40px;
  background-color: #e2e7f7;
  border: none;
  box-shadow: 1px 1px 1px #696969;
  cursor: pointer;
}
#reserveBtn {
  background-color: #e2e7f7;
  cursor: pointer;
  border: none;
  box-shadow: 1px 1px 1px #696969;
}
.seat-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
  gap: 10px;
}
.seat-item {
  width: 40px;
  height: 40px;
  border: 1px solid #696969;
}
#result, h1 {
  text-align: center;
}

const reserveEl = document.querySelector("#reserve");
reserveEl.addEventListener("click", function() {
  const seatEl = document.querySelector("#seat");
  if(seatEl.style.display == 'none') {
    seatEl.style.display = 'block';
  } else seatEl.style.display = 'none';
});

const seat = document.querySelectorAll(".seat-item");

const reserveBtn = document.querySelector("#reserveBtn");
reserveBtn.addEventListener("click", function() {
  const seatNum = document.getElementById("seatNum").value;
  for(let e of seat) {
    let tmp = e.className.substring(10);
    if(tmp == seatNum) {
      if(e.style.backgroundColor == "royalblue") {
        alert("이미 예매가 완료된 좌석 입니다.");
      } else {
        e.style.backgroundColor = "royalblue";
        alert("예매가 완료되었습니다.");
      }
      const inputBox = document.querySelector("#seatNum");
      inputBox.value = "";
      document.getElementById("seatNum").focus();
    }
  }
});

const quitEl = document.querySelector("#quit");
quitEl.addEventListener("click", function() {
  let cnt = 0;
seat.forEach((e) => {
  if(e.style.backgroundColor == "royalblue") {
    cnt++;
  }
});
document.getElementById("result").innerHTML = "총 매출 : " + cnt * 12000 + "원";
});

저작자표시 비영리 변경금지 (새창열림)

'🎨 Frontend > JavaScript' 카테고리의 다른 글

🍦Vanilla JS (10) JSON (0)	2023.04.05
🍦Vanilla JS (9) 정규 표현식 (0)	2023.04.05
🍦Vanilla JS 8-(1) 이벤트 다루기 + 실습 예제 3개 (0)	2023.04.01
🍦Vanilla JS ⑦ 문서 객체 모델(DOM), 투두리스트 예제 (1)	2023.03.30
🍦Vanilla JS ⑥ 클래스 (자바 class VS 자바스크립트 class) (0)	2023.03.29

PointerEvent 속성

KeyboardEvent 객체 확인

이벤트 취소하기

this 키워드 사용하기

실습 예제 - 영화관 예매

'🎨 Frontend > JavaScript' 카테고리의 다른 글

검색 태그

티스토리툴바