[강의] 다양한 이벤트 알아보기

김하은·2023년 11월 7일

코드잇 강의 정리

목록 보기

35/60

마우스 버튼 이벤트

MouseEvent.button: 마우스의 각 버튼 별로 이벤트를 구분하고 싶을 때
- 0: 마우스 왼쪽 버튼
- 1: 마우스 휠
- 2: 마우스 오른쪽 버튼
MouseEvent.type
- click: 마우스 왼쪽 버튼을 눌렀을 때
- contextmenu: 마우스 오른쪽 버튼을 눌렀을 때
- dblclick: 동일한 위치에서 빠르게 두번 click할 때
- mousedown: 마우스 버튼을 누른 순간
- mouseup: 마우스 버튼을 눌렀다 뗀 순간
하나의 동작에 여러 이벤트들이 발생할 수 있음
- 좌클릭, 우클릭, 더블클릭 (순서 잘 보기)
- 운영체제마다 달라질 수 있음
사용예시: 청기, 백기

const flagBlue = document.querySelector('.flag-blue');
const flagWhite = document.querySelector('.flag-white');

function reset() {
  document.querySelector('.up').classList.remove('up');
}

// 1. flagUp 함수를 완성해 주세요
function flagUp(e) {
  // 여기에 코드를 작성해 주세요
  if (e.button === 0) {
    flagBlue.classList.add('up');
  } else if (e.button === 2) {
    flagWhite.classList.add('up');
  }
  // 500 밀리초 뒤에 reset함수를 실행
  setTimeout(reset, 500);
}

// 2. 마우스 오른쪽 버튼 클릭시 나타나는 메뉴창을 막아주세요 
document.addEventListener('contextmenu', function (event) {
  // 여기에 코드를 작성하세요
  event.preventDefault();

});

// 테스트 코드
document.addEventListener('mousedown', flagUp);

마우스 이동 이벤트

MouseEvent.type
- mousemove: 마우스 포인터가 이동할 때
- mouseover: 마우스 포인터가 요소 밖에서 안으로 이동할 때
- mouseout: 마우스 포인터가 요소 안에서 밖으로 이동할 때

마우스 위치

MouseEvent.clientX, clientY: 화면에 표시되는 창 기준 마우스 포인터 위치
- 클라이언트 영역 내에서 마우스의 좌표 정보
- 클라이언트 영역이란 이벤트가 발생한 순간에 브라우저가 콘텐츠를 표시할 수 있는 영역
- 스크롤 위치와는 무관하게 항상 보여지는 화면의 좌측 상단의 모서리 위치를 (0, 0)으로 계산
MouseEvent.pageX, pageY: 웹 문서 전체 기준 마우스 포인터 위치
- 스크롤로 인해서 보이지 않게된 화면의 영역까지 포함해서 측정함
MouseEvent.offsetX, offsetY: 이벤트가 발생한 요소 기준 마우스 포인터 위치
- 스크롤 위치와는 무관하게 항상 대상의 좌측 상단의 모서리 위치를 (0, 0)으로 계산

mouseover / mouseout

MouseEvent.target: 이벤트가 발생한 요소
MouseEvent.relatedTarget: 이벤트가 발생하기 직전(또는 직후)에 마우스가 위치해 있던 요소

const box2 = document.querySelector('#box2');

function printEventData(e) {
  console.log('event:', e.type);
  console.log('target:', e.target);
  console.log('relatedTarget:', e.relatedTarget);
  console.log('------------------------------------');
  if (e.target.classList.contains('cell')) {
    e.target.classList.toggle('on');
  }
}

box2.addEventListener('mouseover', printEventData);
box2.addEventListener('mouseout', printEventData);

mouseenter / mouseleave

mouseenter: mouseover처럼 마우스 포인터가 요소 바깥에서 안쪽으로 들어갈 때
mouseleave: mouseout처럼 마우스 포인터가 요소 안쪽에서 바깥으로 나갈 때 발생
mouseover / mouseout과의 차이점
1. 버블링이 일어나지 않음
2. 자식 요소의 영역을 구분하지 않음
- 이벤트 핸들러가 자식 요소에까지 영향을 끼치게 하고싶은 경우에는 mouseover/mouseout을, 자식 요소에는 영향을 끼치지 않고 해당 요소에만 이벤트 핸들러를 다루고자 한다면 mouseenter/mouseleave를 활용하기

효준이네 집

// showTitle 함수를 완성해 주세요
function showTitle(e) {
	// 여기에 코드를 작성하세요
  if (e.target.dataset.title) {
    const span = document.createElement('span');
    span.setAttribute('class', 'title'); // span.classList.add('title');
    span.textContent = e.target.getAttribute('data-title') // span.textContent = e.target.dataset.title
    e.target.append(span);
  }
}

// removeTitle 함수를 완성해 주세요
function removeTitle(e) {
	// 여기에 코드를 작성하세요
  if (e.target.dataset.title) {
    e.target.lastElementChild.remove();
  }

}

// '대상'과 '타입'을 수정해 주세요
const map = document.querySelector('.map');
map.addEventListener('mouseover', showTitle);
map.addEventListener('mouseout', removeTitle);

키보드 이벤트

KeyboardEvent.type
- keydown: 키보드 버튼을 누른 순간
- keypress: 키보드 버튼을 누른 순간
  - 출력값이 변하는 key에서만 반응함 (esc나 시프트에는 반응하지 않음)
  - 하나의 키를 계속 누르고 있으면 한번만 반응함
  - 영어가 아닌 경우에는 반응하지 않음
  - 웹 표준에서는 권장하지 않음
  - keyup, keydown 타입으로 이벤트 핸들러를 등록하고, enter나 esc, 혹은 방향키와 같은 키보드 버튼을 누를 경우 해당 버튼에 대한 이벤트가 2번 중복해서 반응하는 이슈가 있음 -> 왜냐하면 글자가 조합 중인지, 조합이 완료된 것인지 쉽게 파악하기 어렵기 때문 -> 따라서 특별한 상황에 따라서는 keypress가 필요할 수도 있음
- keyup: 키보드 버튼을 눌렀다 뗀 순간
KeyboardEvent.key: 이벤트가 발생한 버튼의 값 (사용자가 누른 키가 가지고 있는 값)
KeyboardEvent.code: 이벤트가 발생한 버튼의 키보드에서 물리적인 위치
- key값은 같지만 code 값은 다른 경우가 있으니 잘 알고 사용할 것

똑Talk한 Enter키!

const chatBox = document.querySelector('#chat-box');
const input = document.querySelector('#input');
const send = document.querySelector('#send');

function sendMyText() {
  const newMessage = input.value;
  if (newMessage) {
    const div = document.createElement('div');
    div.classList.add('bubble', 'my-bubble');
    div.innerText = newMessage;
    chatBox.append(div);
  } else {
    alert('메시지를 입력하세요...');
  }

  input.value = '';
}

send.addEventListener('click', sendMyText);

// 여기에 코드를 작성하세요
input.addEventListener('keypress', function(e) {
  if (e.keyCode === 13 && !e.shiftKey) {
    e.preventDefault();
    sendMyText();
  }
});

이벤트 객체의 프로퍼티에는 shiftKey라는 프로퍼티는 이벤트가 발생할 때 shift키를 눌렀는지를 불린 형태로 담고 있음

input 태그 다루기

포커스 이벤트
- focusin: 요소에 포커스가 되었을 때
- focusout: 요소에 포커스가 빠져나갈 때
- focus: 요소에 포커스가 되었을 때 (버블링 x)
- blur: 요소에 포커스가 빠져나갈 때 (버블링 x)
입력 이벤트
- input: 사용자가 입력을 할 때
- change: 요소의 값이 변했을 때
  - 입력이 시작되기 전 값과 완료된 후 값에 차이가 있을 때
  - 최종적으로 입력이 완료되었다는 암시를 주어야 함(focusout, 엔터 등)

코드잇 산성비

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

function checker() {
  const words = document.querySelectorAll('.word');
  if (words.length === 0) {
    alert('Success!👏');
    if(confirm('retry?')) {
      window.location.reload();
    }
  }
}

function deleteWord () {
  const word = document.querySelector(`[data-word="${input.value}"]`);
  if (!word) {
    return;
  }
  word.remove();
  checker();
  input.value = '';
}

// 여기에 코드를 작성하세요
input.addEventListener("change", deleteWord)

스크롤 이벤트

scroll 이벤트는 보통 window 객체에 이벤트 핸들러를 등록하고 window 객체의 프로퍼티와 함께 자주 활용됨
특히 scrollY 프로퍼티를 활용하면 스크롤된 특정한 위치를 기준으로 이벤트 핸들러가 동작하게 하거나 혹은 스크롤 방향(위로 스크롤 중인지/아래로 스크롤 중인지)을 기준으로 이벤트 핸들러가 동작하게끔 활용할 수도 있음

// Scroll 이벤트
let lastScrollY = 0;

function onSroll() {
  const nav = document.querySelector('#nav');
  const toTop = document.querySelector('#to-top');
  const STANDARD = 30;
  
  if (window.scrollY > STANDARD) { // 스크롤이 30px을 넘었을 때
    nav.classList.add('shadow');
    toTop.classList.add('show');
  } else { // 스크롤이 30px을 넘지 않을 때
    nav.classList.remove('shadow');
    toTop.classList.remove('show');
  } 

	if (window.scrollY > lastScrollY) { // 스크롤 방향이 아랫쪽 일 때
    nav.classList.add('lift-up');
  } else { // 스크롤 방향이 윗쪽 일 때
    nav.classList.remove('lift-up');
  }

  lastScrollY = window.scrollY;
}

window.addEventListener('scroll', onSroll);