JavaScript 마우스 이벤트와 키보드 이벤트 - 핵심 가이드

이벤트 개요

마우스 이벤트와 키보드 이벤트는 사용자의 입력을 감지하여 웹페이지가 반응하도록 만드는 핵심 기능입니다. 이 두 이벤트를 활용하면 클릭, 호버, 키 입력 등 다양한 상호작용을 구현할 수 있습니다.

🔍 기본 HTML 예제

<div id="mouseArea" style="width: 200px; height: 100px; border: 1px solid #ccc;">
    마우스 영역
</div>
<input type="text" id="keyboardInput" placeholder="키보드 입력 테스트">
<div id="output">이벤트 결과</div>

---

마우스 이벤트

마우스로 수행할 수 있는 다양한 동작에 대응하는 이벤트들입니다.

주요 마우스 이벤트 종류

let mouseArea = document.getElementById('mouseArea');
let output = document.getElementById('output');

// 클릭 이벤트
mouseArea.addEventListener('click', function(event) {
    output.textContent = '클릭됨!';
    console.log('클릭 위치:', event.clientX, event.clientY);
});

// 더블클릭 이벤트
mouseArea.addEventListener('dblclick', function() {
    output.textContent = '더블클릭됨!';
});

// 마우스 진입/이탈
mouseArea.addEventListener('mouseenter', function() {
    mouseArea.style.backgroundColor = 'lightblue';
    output.textContent = '마우스 진입';
});

mouseArea.addEventListener('mouseleave', function() {
    mouseArea.style.backgroundColor = '';
    output.textContent = '마우스 이탈';
});

// 마우스 이동
mouseArea.addEventListener('mousemove', function(event) {
    let x = event.offsetX;
    let y = event.offsetY;
    output.textContent = `마우스 위치: (${x}, ${y})`;
});

마우스 버튼 구분

mouseArea.addEventListener('mousedown', function(event) {
    switch(event.button) {
        case 0:
            output.textContent = '왼쪽 버튼 눌림';
            break;
        case 1:
            output.textContent = '휠 버튼 눌림';
            break;
        case 2:
            output.textContent = '오른쪽 버튼 눌림';
            break;
    }
});

// 우클릭 메뉴 방지
mouseArea.addEventListener('contextmenu', function(event) {
    event.preventDefault();
    output.textContent = '우클릭 메뉴 차단됨';
});

드래그 앤 드롭 기본

let isDragging = false;
let startX, startY;

mouseArea.addEventListener('mousedown', function(event) {
    isDragging = true;
    startX = event.clientX;
    startY = event.clientY;
    mouseArea.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', function(event) {
    if (isDragging) {
        let deltaX = event.clientX - startX;
        let deltaY = event.clientY - startY;
        output.textContent = `드래그 중: (${deltaX}, ${deltaY})`;
    }
});

document.addEventListener('mouseup', function() {
    if (isDragging) {
        isDragging = false;
        mouseArea.style.cursor = 'default';
        output.textContent = '드래그 완료';
    }
});

---

키보드 이벤트

키보드 입력을 감지하고 처리하는 이벤트들입니다.

주요 키보드 이벤트 종류

let input = document.getElementById('keyboardInput');

// 키 눌림 (문자 입력 시)
input.addEventListener('keypress', function(event) {
    output.textContent = `문자 입력: ${event.key}`;
});

// 키 눌렸을 때 (모든 키)
input.addEventListener('keydown', function(event) {
    output.textContent = `키 눌림: ${event.key} (코드: ${event.keyCode})`;

    // 특정 키 처리
    if (event.key === 'Enter') {
        console.log('엔터 키 눌림');
    }

    if (event.key === 'Escape') {
        input.value = '';
        console.log('ESC로 입력 초기화');
    }
});

// 키 뗐을 때
input.addEventListener('keyup', function(event) {
    output.textContent = `현재 입력값: ${event.target.value}`;
});

수식키 조합 감지

document.addEventListener('keydown', function(event) {
    let keys = [];

    if (event.ctrlKey) keys.push('Ctrl');
    if (event.shiftKey) keys.push('Shift');
    if (event.altKey) keys.push('Alt');
    keys.push(event.key);

    let combination = keys.join(' + ');
    output.textContent = `키 조합: ${combination}`;

    // 단축키 처리
    if (event.ctrlKey && event.key === 's') {
        event.preventDefault();
        console.log('저장 단축키');
    }

    if (event.ctrlKey && event.key === 'z') {
        event.preventDefault();
        console.log('실행 취소');
    }
});

특수 키 처리

input.addEventListener('keydown', function(event) {
    switch(event.key) {
        case 'ArrowUp':
            output.textContent = '위쪽 화살표';
            break;
        case 'ArrowDown':
            output.textContent = '아래쪽 화살표';
            break;
        case 'ArrowLeft':
            output.textContent = '왼쪽 화살표';
            break;
        case 'ArrowRight':
            output.textContent = '오른쪽 화살표';
            break;
        case 'Tab':
            output.textContent = '탭 키';
            break;
        case 'Backspace':
            output.textContent = '백스페이스';
            break;
        case 'Delete':
            output.textContent = '삭제 키';
            break;
    }
});

---

실무 활용 예제

1. 이미지 갤러리 네비게이션

<div id="gallery">
    <img id="currentImage" src="image1.jpg" alt="갤러리 이미지">
    <div id="imageInfo">이미지 1/3 - 화살표 키로 이동</div>
</div>

let images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
let currentIndex = 0;
let imageElement = document.getElementById('currentImage');
let infoElement = document.getElementById('imageInfo');

// 키보드로 이미지 네비게이션
document.addEventListener('keydown', function(event) {
    if (event.key === 'ArrowLeft') {
        currentIndex = (currentIndex - 1 + images.length) % images.length;
        updateImage();
    } else if (event.key === 'ArrowRight') {
        currentIndex = (currentIndex + 1) % images.length;
        updateImage();
    }
});

// 마우스 클릭으로 다음 이미지
imageElement.addEventListener('click', function() {
    currentIndex = (currentIndex + 1) % images.length;
    updateImage();
});

function updateImage() {
    imageElement.src = images[currentIndex];
    infoElement.textContent = `이미지 ${currentIndex + 1}/${images.length}`;
}

2. 검색 기능 구현

<input type="text" id="searchInput" placeholder="검색어 입력 (Enter로 검색)">
<div id="searchResults"></div>

let searchInput = document.getElementById('searchInput');
let resultsDiv = document.getElementById('searchResults');
let searchTimeout;

// 실시간 검색 (debouncing)
searchInput.addEventListener('input', function() {
    clearTimeout(searchTimeout);
    searchTimeout = setTimeout(() => {
        performSearch(this.value);
    }, 300);
});

// 엔터로 즉시 검색
searchInput.addEventListener('keydown', function(event) {
    if (event.key === 'Enter') {
        clearTimeout(searchTimeout);
        performSearch(this.value);
    }
});

function performSearch(query) {
    if (query.trim() === '') {
        resultsDiv.innerHTML = '';
        return;
    }

    // 가상의 검색 결과
    let results = ['결과 1', '결과 2', '결과 3'].filter(item => 
        item.toLowerCase().includes(query.toLowerCase())
    );

    resultsDiv.innerHTML = results.map(result => 
        `<div class="search-result">${result}</div>`
    ).join('');
}

3. 드래그 가능한 요소

<div id="draggableBox" style="width: 100px; height: 100px; background: lightcoral; position: absolute; cursor: grab;">
    드래그하세요
</div>

let draggableBox = document.getElementById('draggableBox');
let isDragging = false;
let offsetX, offsetY;

draggableBox.addEventListener('mousedown', function(event) {
    isDragging = true;
    offsetX = event.clientX - draggableBox.offsetLeft;
    offsetY = event.clientY - draggableBox.offsetTop;
    draggableBox.style.cursor = 'grabbing';
});

document.addEventListener('mousemove', function(event) {
    if (isDragging) {
        draggableBox.style.left = (event.clientX - offsetX) + 'px';
        draggableBox.style.top = (event.clientY - offsetY) + 'px';
    }
});

document.addEventListener('mouseup', function() {
    isDragging = false;
    draggableBox.style.cursor = 'grab';
});

4. 게임 컨트롤러 (WASD + 마우스)

let player = { x: 100, y: 100 };
let keys = {};

// 키 상태 추적
document.addEventListener('keydown', function(event) {
    keys[event.key.toLowerCase()] = true;
});

document.addEventListener('keyup', function(event) {
    keys[event.key.toLowerCase()] = false;
});

// 게임 루프
function gameLoop() {
    // WASD로 이동
    if (keys['w']) player.y -= 2;
    if (keys['s']) player.y += 2;
    if (keys['a']) player.x -= 2;
    if (keys['d']) player.x += 2;

    // 플레이어 위치 업데이트
    updatePlayerPosition();
    requestAnimationFrame(gameLoop);
}

function updatePlayerPosition() {
    let playerElement = document.getElementById('player');
    if (playerElement) {
        playerElement.style.left = player.x + 'px';
        playerElement.style.top = player.y + 'px';
    }
}

gameLoop();

---

마무리

마우스 이벤트와 키보드 이벤트는 사용자와의 상호작용을 구현하는 핵심 도구입니다. 이 두 이벤트를 잘 활용하면 직관적이고 반응성 좋은 웹 애플리케이션을 만들 수 있습니다.
마우스와 키보드 이벤트를 마스터하면 사용자가 편리하게 사용할 수 있는 인터랙티브 웹 애플리케이션을 만들 수 있습니다!