본문 바로가기
CodeIt_Sprint/JavaScript_중급

(9)JavaScript중급_4_이벤트 활용_Mouse_event_1_클릭관련

by 코잼민 2024. 11. 15.

＃알아야 할 개념 :

● 개념_1 : Mouse 이벤트 기본 이론

○ 정의 :Mouse 포인터에 관한 기본적인 event.type과 event.프로퍼티가 존재한다.

○ event.button : 마우스의 왼쪽 클릭, 오른쪽 클릭 , 드래그 버튼 에 따라 0,1,2값을 반환하는 event객체 프로퍼티 :

  • 왼쪽 마우스 클릭 : event.button == 0
  • 오른쪽 마우스 클릭 ; event.button == 2
  • 드래그 클릭 : event.button == 1

○ event.type : 요소노드에 addEventListener로 이벤트 핸들러를 추가할 때, 마우스 기본 동작에 추가할 떄, event.type들 //존나 많지만, 

- 마우스의 어떤 버튼에 관한 event type || 마우스 클릭 횟수에 관한 event type (3가지)

  • 왼쪽 마우스 클릭  event.type : 'click'
  • 오른쪽 마우스 클릭 event.type  : 'contextmenu'
  • 더블 클릭 event.type : 'dblclick'

- 마우스 클릭 세부 동작 event type (2가지)

  • 마우스 클릭을 누른 순간 event.type : 'mousedown'
  • 마우스 클릭을 뗀 순간 event.type : 'mouseup'

● 개념_2 : 마우스 동작에 대한 Mouse 이벤트 발생 순서 (Window OS 기준)

○ 왼쪽 클릭시 :

'mousedown' → 'mouseup' → 'click'

○ 오른쪽 클릭시  (2가지):

①. 메뉴창이 발생시 : 'mousedown' → 'mouseup' → 'contextmenu' //근데 내꺼에서는 발생함...?

② . 메뉴창이 발생하지 않을 시 : 'mousedown' → 'mouseup' → 'contextmenu'

○ 두번 클릭시 : //왼쪽 마우스 클릭 2번 기준

'mousedown' → 'mouseup' → 'click'

'mousedown' → 'mouseup' → 'click'

'dblclick'

※연습문제  :

● 문제 조건 :

마우스를 이용해서 마우스 왼쪽 버튼을 누르면 청기(flagBlue)가 올라가고, 마우스 오른쪽 버튼을 누르면 백기(flagWhite)가 올라가도록 기획을 했는데요.

나름대로 열심히 고민해서 코드를 작성해봤지만 좀처럼 구현하기가 쉽지 않고 자꾸만 오른쪽 클릭을 할 때 브라우저의 메뉴창이 나타나서 어떻게 해야할지 막막해 하는 중입니다.

재우를 위해서 다음 조건을 만족하는 코드를 작성해 주세요.

  1. 1. 마우스 왼쪽 버튼을 누른 순간 청기(flagBlue)에 'up'이라는 클래스 속성값이 추가되고, 마우스 오른쪽 버튼을 누른 순간 백기(flagWhite)에 'up'이라는 클래스 속성값이 추가되는 flagUp 함수를 완성해 주세요.
  2. 2. 웹 페이지에서 contextmenu 이벤트가 발생하면 브라우저의 메뉴창이 나타나지 않도록 막아 주세요.

참고로 flagUp 함수 안에 있는 setTimeout 함수는 두 번째 파라미터로 전달한 값의 밀리초 만큼의 시간 이후에 첫 번째 파라미터로 전달한 함수를 실행시켜주는 함수입니다.

#Default JavaScript 코드 :

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) {
  // 여기에 코드를 작성해 주세요


  // 500 밀리초 뒤에 reset함수를 실행
  setTimeout(reset, 500);
}

// 2. 마우스 오른쪽 버튼 클릭시 나타나는 메뉴창을 막아주세요 
document.addEventListener('contextmenu', function (event) {
  // 여기에 코드를 작성하세요

});

// 테스트 코드
document.addEventListener('mousedown', flagUp);

● 전략 & 해결과정 :

○ Default JavaScript  코드 해석

1_ 청기든 손, 백기 든 손에 해당하는 요소노드 변수 저장

const flagBlue = document.querySelector('.flag-blue');
const flagWhite = document.querySelector('.flag-white');

2_ 청기 || 백기 에서 "들어올림"에 대한 스타일 시트 적용에서 다시 되돌릴 때, => 요소노드.classList.remove('up')을 통해, 다시 원상복귀를 구현

function reset() {
  document.querySelector('.up').classList.remove('up');

//문서 내 노드 중 class 'up' 스타일 시트가  적용된 태그는 그 적용을 해제한다. => 즉, 깃발 내려놓기 원상태로 돌려놓기

}

3_ 마우스 클릭 시, 동작에 대한 구현 이벤트 핸들러 :

function flagUp(e) {
  // 여기에 코드를 작성해 주세요


  // 500 밀리초 뒤에 reset함수를 실행 :setTimeout()메소드 + reset() 원상태 돌려놓기 메소드
  setTimeout(reset, 500);


}

4_ 추가적용 핸들러 : 오른쪽 마우스 클릭시,   메뉴창 생성 저지 구현 부분

// 2. 마우스 오른쪽 버튼 클릭시 나타나는 메뉴창을 막아주세요 
document.addEventListener('contextmenu', function (event) {


  // 여기에 코드를 작성하세요

});

5_ 웹페이지 문서 내에서 마우스 클릭(왼쪽 오른쪽 둘다)시, 작동이 되도록 document에 이벤트 핸들러 적용

// 테스트 코드
document.addEventListener('mousedown', flagUp);

○ 전략

①. flagUp() 내 : if조건절 +  event.button 프로퍼티로, 왼쪽 마우스 클릭 || 오른쪽 마우스 클릭 인식 구분

②. 깃발 올리기 적용

- 왼쪽 마우스 클릭 => 청색깃발에 class.up 적용 : 청색깃발 요소노드 . classList.toggle('up')

- 오른쪽 마우스 클릭 => 휜색깃발에 class.up 적용 : 휜색깃발 요소노드 . classList.toggle('up')

③ . 마우스 오른쪽 클릭의 메뉴창 생성 저지하기 :

  • document.addEventListener('contextmenu',);
  • event.preventDefault() 메소드

 

○ 정답 :

<!DOCTYPE html>
<html lang="ko">

<head>
  <meta charset="UTF-8">
  <link rel="stylesheet" href="3.css">
  <title>청기 백기</title>
</head>

<body>
  <div class="container">
    <img src="imgs/flag-blue.png" alt="flag" class="flag flag-blue">
    <img src="imgs/flag-white.png" alt="flag" class="flag flag-white">
  </div>
  <script>
    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.toggle('up');
      }
      else if (e.button == 2) {
        flagWhite.classList.toggle('up');
      }

      // 500 밀리초 뒤에 reset함수를 실행
      setTimeout(reset, 500);
    }

    // 2. 마우스 오른쪽 버튼 클릭시 나타나는 메뉴창을 막아주세요 
    document.addEventListener('contextmenu', function (event) {
      // 여기에 코드를 작성하세요
      event.preventDefault();//③
    });

    // 테스트 코드
    document.addEventListener('mousedown', flagUp);
  </script>
</body>

</html>

 

저작자표시

'CodeIt_Sprint > JavaScript_중급' 카테고리의 다른 글

(11)JavaScript중급_4_이벤트 활용_KeyBoard_event  (1) 2024.11.15
(10)JavaScript중급_4_이벤트 활용_Mouse_event_2_마우스포인터  (1) 2024.11.15
(8)JavaScript중급_3_5_event 객체의 프로퍼티 메소드 : preventDefault()  (0) 2024.11.13
(7)JavaScript중급_3_4_이벤트 위임 문제 , 해결방법은 if조건절 + event.contains() 메소드  (5) 2024.11.13
(6)JavaScript중급_3_3_이벤트 버블링과 이벤트흐름(DOM이벤트객체 경로과정)  (1) 2024.11.13

관련글

티스토리툴바