자바스크립트: 다양한 이벤트 처리

 

 

 

안녕하세요 오늘은 자바스크립트에서 다양한 이벤트 처리에 대해서 알아보겠습니다.

 

 

 

1. 클릭 이벤트 처리:

 

버튼을 클릭하면 버튼이 클릭된것을 콘솔창에서 보여줍니다.

 

const button = document.querySelector('#my-button');

button.addEventListener('click', function() {
  console.log('Button clicked!');
});

 

 

 

 

 

2. 마우스 오버 및 아웃 이벤트 처리:

 

해당 요소에 마우스커서를 올려다 땔때 콘솔을 출력합니다.

 

const element = document.querySelector('.my-element');

element.addEventListener('mouseover', function() {
  console.log('Mouse over!');
});

element.addEventListener('mouseout', function() {
  console.log('Mouse out!');
});

 

 

 

 

 

 

3. 키보드 이벤트 처리:

 

keydown 이벤트와 keyup 이벤트는 키보드 관련 이벤트로, 키를 누르는 동작과 키를 뗀 동작을 각각 처리합니다. 

 

document.addEventListener('keydown', function(event) {
  console.log(`Key pressed: ${event.key}`);
});

 

document.addEventListener('keyup', function(event) {
  console.log(`Key released: ${event.key}`);
});

 

 

 

 

 

4. 폼 제출 이벤트 처리:

 

form을 제출할때 사용합니다.

 

const form = document.querySelector('#my-form');

form.addEventListener('submit', function(event) {
  event.preventDefault(); // 폼 제출 기본 동작 막기

  const input = form.querySelector('#input-field');
  const inputValue = input.value;
  
  console.log(`Form submitted with value: ${inputValue}`);
});

 

 

 

 

 

5. 윈도우 로드 이벤트:

 

문서가 완전 로딩 후에 실행됩니다.

 

window.addEventListener('load', function() {
  console.log('Window loaded!');
});

 

 

 

 

6. 터치 이벤트 처리:

 

터치를 감지하여 처리합니다.

 

const element = document.querySelector('.touch-element');

element.addEventListener('touchstart', function(event) {
  console.log('Touch started!');
});

element.addEventListener('touchend', function(event) {
  console.log('Touch ended!');
});

 

 

 

 

7. 스크롤 이벤트 처리:

 

마우스를 스크롤 할때 발생합니다.

 

window.addEventListener('scroll', function() {
  console.log('Scrolling...');
});

 

 

 

 

8. 마우스 위치 이벤트 처리: 

 

마우스의 위치를 추적하여 처리합니다.

 

document.addEventListener('mousemove', function(event) {
  const mouseX = event.clientX;
  const mouseY = event.clientY;

  console.log(`Mouse position: X=${mouseX}, Y=${mouseY}`);
});

 

 

 

 

9. 이미지 로드 이벤트:

 

이미지가 로드되면 콘솔을 출력합니다.

 

const image = document.querySelector('img');

image.addEventListener('load', function() {
  console.log('Image loaded!');
});

image.addEventListener('error', function() {
  console.log('Error occurred while loading image!');
});

 

 

 

 

10. 마우스 버튼 클릭 이벤트:

 

마우스의 버튼을 누를때 땔때를 감지하여 처리합니다.

 

const button = document.querySelector('#my-button');

button.addEventListener('mousedown', function(event) {
  console.log(`Mouse button ${event.button} pressed!`);
});

button.addEventListener('mouseup', function(event) {
  console.log(`Mouse button ${event.button} released!`);
});

 

 

 

 

11. 마우스 휠 이벤트:

 

마우스의 휠을 움직일때 감지하여 처리합니다.

 

window.addEventListener('wheel', function(event) {
  const deltaY = event.deltaY;

  if (deltaY > 0) {
    console.log('Scrolled down!');
  } else if (deltaY < 0) {
    console.log('Scrolled up!');
  }
});

 

 

 

 

12. 화면 크기 변경 이벤트:

 

화면 크기가 변경됬을때를 감지하여 처리합니다.

 

window.addEventListener('resize', function() {
  const screenWidth = window.innerWidth;
  const screenHeight = window.innerHeight;

  console.log(`Screen size changed: Width=${screenWidth}, Height=${screenHeight}`);
});

 

 

 

 

13. 컨텍스트 메뉴 페이지 이벤트:

 

마우스 우클릭을 했을때 컨텍스트 메뉴를 처리합니다.

 

document.addEventListener('contextmenu', function(event) {
   event.preventDefault(); // 기본 컨텍스트 메뉴 표시 막기

   console.log('Context menu opened!');
});

 

 

 

 

14. 드래그 앤 드롭 이벤트:

 

 

마우스를 이용해 드래그 앤 드롭 할때 감지하여 처리합니다.

 

const draggableElement = document.querySelector('.draggable');
const dropZone = document.querySelector('.drop-zone');

draggableElement.addEventListener('dragstart', function(event) {
  event.dataTransfer.setData('text/plain', event.target.id);
});

dropZone.addEventListener('dragover', function(event) {
  event.preventDefault();
});

dropZone.addEventListener('drop', function(event) {
  event.preventDefault();
  
  const data = event.dataTransfer.getData('text/plain');
  const draggedElement = document.getElementById(data);

  dropZone.appendChild(draggedElement);
});

 

 

 

 

다음에는 자바스크립트의 비동기 처리방식들에 대해 알아보겠습니다.

 

감사합니다.