[자바스크립트 js] 마우스 버튼 이벤트 / MouseEvent.button / MouseEvent.type

  MouseEvent.button

• 0 : 마우스 왼쪽 버튼
• 1 : 마우스 휠
• 2 : 마우스 오른쪽 버튼
• 3 : X1 (일반적으로 브라우저 뒤로 가기 버튼)
• 4 : X2 (일반적으로 브라우저 앞으로 가기 버튼)

잠깐만 🤚🏼

mouseenter, mouseleave, mouseover, mouseout, mousemove 처럼 마우스 이동과 관련된 이벤트에서는

이 값이 null 이나 undefined 가 아니라 0 이다.

 

 

 

 

  MouseEvent.type

• click : 마우스 왼쪽 버튼을 눌렀을 때
• contextmenu : 마우스 오른쪽 버튼을 눌렀을 때
• dblclick : 동일한 위치에서 빠르게 두번 click할 때
• mousedown : 마우스 버튼을 누른 순간
• mouseup : 마우스 버튼을 눌렀다 뗀 순간
• mousemove : 마우스를 움직이는 순간
• mouseover : 마우스 포인터가 요소 위로 올라온 순간
• mouseout : 마우스 포인터가 요소에서 벗어나는 순간
• mouseenter : 마우스 포인터가 요소 위로 올라온 순간 (버블링 일어나지 않음)
• mouseleave : 마우스 포인터가 요소에서 벗어나는 순간 (버블링 일어나지 않음)

 

 

 

  예시

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);