[JavaScript] 자바스크립트 마우스 클릭 이벤트

728x90

목 차

• 1. 마우스 클릭 이벤트란?
• 2. 마우스 클릭 이벤트 종류
• 2-1. mousedown
• 2-2. mouseup
• 2-3. click
• 2-4. dblclick
• 2-5. contextmenu

 

1. 마우스 클릭 이벤트란?

• JavaScript에서 마우스 클릭 이벤트는 사용자가 웹 페이지에서 마우스를 클릭했을 때 발생하는 이벤트입니다. 주로 click, mousedown, mouseup 등의 이벤트로 처리하며, 이벤트 핸들러를 사용해 특정 작업을 수행하도록 설정할 수 있습니다.

 

2. 마우스 클릭 이벤트 종류

2-1. mousedown

• 설명 : 마우스 버튼을 누르는 순간 발생합니다.
• 특징 : 클릭 후 버튼을 떼기 전에 발생합니다. (마우스 버튼을 눌러서 내려간 상태를 의미합니다.)

document.addEventListener('mousedown', function(event) {
  console.log('마우스 버튼을 눌렀습니다.', event);
});

 

2-2. mouseup

• 설명 : 마우스 버튼을 눌렀다가 떼는 순간 발생합니다.
• 특징 : 클릭을 완료하는 마지막 단계입니다. (마우스 버튼을 눌러서 버튼이 내려갔다가 올라간 상태를 의미합니다.)

document.addEventListener('mouseup', function(event) {
  console.log('마우스 버튼을 뗐습니다.', event);
});

 

2-3. click

• 설명 : 마우스 버튼을 눌렀다가 떼는 동작이 완료되었을 때 발생합니다.
• 특징 : mousedown과 mouseup 이벤트가 모두 발생한 후에 실행됩니다. 사용자가 마우스 버튼을 클릭했을 때 발생합니다.

document.addEventListener('click', function(event) {
  console.log('클릭 이벤트가 발생했습니다.', event);
});

 

2-4. dblclick

• 설명 : 사용자가 동일한 위치를 빠르게 두 번 클릭했을 때 발생합니다.
• 특징 : 브라우저 설정에 따라 "더블클릭" 간격이 다를 수 있습니다.

document.addEventListener('dblclick', function(event) {
  console.log('더블클릭 이벤트가 발생했습니다.', event);
});

 

2-5. contextmenu

• 설명 : 마우스 오른쪽 버튼을 클릭했을 때 발생합니다
• 특징 : 기본적으로 브라우저의 컨텍스트 메뉴가 표시됩니다.

document.addEventListener('contextmenu', function(event) {
  event.preventDefault(); // 기본 메뉴를 비활성화
  console.log('우클릭 이벤트 발생!', event);
});