Computer >> 컴퓨터 >  >> 프로그래밍 >> JavaScript

마우스 클릭 시 즉시 이벤트 발생시키기(mousedown 이벤트 활용법) - JavaScript

개요

JavaScript에서 마우스 버튼을 누르는 순간 즉시 이벤트를 발생시키고 싶다면, addEventListener() 메서드와 함께 mousedown 이벤트를 사용하면 됩니다.

일반적인 click 이벤트는 마우스 버튼을 눌렀다가 뗐을 때(mouseup) 발생하지만, mousedown 이벤트는 버튼을 누르는 즉시 트리거됩니다. 버튼 클릭에 대한 빠른 반응이 필요한 드래그 앤 드롭, 게임 컨트롤, 실시간 인터랙션 등에서 유용하게 활용할 수 있습니다.

예제 코드

다음은 mousedown 이벤트를 활용한 전체 코드입니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<body>
</body>
<script>
    document.addEventListener("mousedown", function () {
        console.log("Mouse down event is happening");
    });
</script>
</html>

실행 방법

위 코드를 “index.html”과 같은 파일 이름으로 저장합니다. 그다음 VS Code 에디터에서 해당 파일을 마우스 오른쪽 버튼으로 클릭하고 “Open with Live Server” 옵션을 선택하여 프로그램을 실행하면 됩니다.

출력 결과

프로그램을 실행하면 콘솔 화면이 열립니다.

마우스 클릭 시 즉시 이벤트 발생시키기(mousedown 이벤트 활용법) - JavaScript

이후 웹 페이지에서 마우스를 클릭하는 순간 이벤트가 즉시 발생하며, 콘솔에는 다음과 같은 출력 결과가 표시됩니다.

마우스 클릭 시 즉시 이벤트 발생시키기(mousedown 이벤트 활용법) - JavaScript

Mouse down event is happening

정리

  • mousedown: 마우스 버튼을 누르는 순간 이벤트가 발생합니다.
  • mouseup: 마우스 버튼을 뗄 때 이벤트가 발생합니다.
  • click: mousedown과 mouseup이 모두 완료된 후에 발생합니다.

클릭 반응 속도가 중요한 기능을 구현할 때는 click 대신 mousedown 이벤트를 사용하는 것이 좋습니다.