□ 마우스 클릭 동작

● 동작1_ 마우스 왼쪽 한번 클릭

○ "마우스 왼쪽 클릭"으로 event.type 발생 종류, 순서 (Window 기준)

- event.type 종류 :

'mousedown'
'mouseup'
'click'

- event.type 순서 : 'mousedown' => "mouseup" => 'click'

● 동작2_ 마우스 오른쪽 한번 클릭 ()

○ "마우스 오른쪽 클릭"으로 event.type 발생 종류, 순서 (Window 기준)

- event.type 종류 :

'mousedown'
'mouseup'
'contextmenu'

- event.type 순서 : 'mousedown' => "mouseup" => 'contextmenu'

● 동작3_ 마우스 왼쪽 2번 연타 클릭 ()

○ "마우스 오른쪽 클릭"으로 event.type 발생 종류, 순서 (Window 기준)

- event.type 종류 :

'mousedown'
'mouseup'
'click'
'mousedown'
'mouseup'
'click'
'dblclick'

● 확인할 수 있는 코드 , 브라우저

○ 코드 : //빨간 Box를 클릭동작 시, 어떤 event.type이 출력되는지 console창에서 확인 가능

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

<head>
  <meta charset="UTF-8">
  <title>마우스 event</title>
  <style>
    #box {
      display: inline-block;
      margin: 50px;
      width: 500px;
      height: 500px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    const box = document.querySelector('#box');

    function printMouseEventType(event) {
      if (event.type === 'click') console.log('click');
      if (event.type === 'mousedown') console.log('mousedown');
      if (event.type === 'mouseup') console.log('mouseup');
      if (event.type === 'contextmenu') console.log('contextmenu');
      if (event.type === 'dblclick') console.log('dblclick');
    }

    box.addEventListener('click', printMouseEventType);
    box.addEventListener('mousedown', printMouseEventType);
    box.addEventListener('mouseup', printMouseEventType);
    box.addEventListener('contextmenu', printMouseEventType);
    box.addEventListener('dblclick', printMouseEventType);
    //우클릭 누를시, 메뉴창 안나옴
    box.addEventListener('contextmenu',function(event){
      event.preventDefault();
    });
  
  </script>
</body>

</html>

● 연습문제 :

실습 설명

게임을 좋아하는 재우는 이번에 배운 자바스크립트를 활용해서 청기 백기 게임을 만들어 보려고 합니다.

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

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

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

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

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

실습 파일 :

project (1).zip

2.72MB

○ 답 :

- index.js

const flagBlue = document.querySelector('.flag-blue');//청기 img 태그 노드 변수 저장
const flagWhite = document.querySelector('.flag-white');//백기 img 태그 노드 변수 저장

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


// 1. flagUp 함수를 완성해 주세요
function flagUp(e) {
  // 여기에 코드를 작성해 주세요
  if(e.type==="click")//왼쪽 마우스 클릭 시.
  {
    flagBlue.classList.add('up');
  }
  else if(e.type==="contextmenu")//오른쪽 마우스 클ㄺ 시,
  {
    flagWhite.classList.add('up');
  }

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

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

});

// 테스트 코드
document.addEventListener('click', flagUp);//전체 창에 마우스 왼쪽 클릭 이벤트 핸들러 적용
document.addEventListener('contextmenu', flagUp);//전체 창에 마우스 오른쪽 클릭 이벤트 핸들러 적용

□ 마우스 포인터 이동 동작

● 동작1_ 마우스 포인터 움직임 동작

○ "마우스 포인터 동작"으로 event.type 값 : "mousemove"

● 동작2_ 마우스 포인터 요소 기준 :

○ "밖 => 안" 으로 event.type 값 : "mouseover"

○ "안 => 밖" 으로 event.type 값 : "mouseout"

○ "mousemove" , "mouseover" , "mouseout" 실습 코드 : 빨간 박스 마우스 움직여보셈

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

<head>
  <meta charset="UTF-8">
  <title>마우스 event</title>
  <style>
    #box {
      display: inline-block;
      margin: 50px;
      width: 500px;
      height: 500px;
      background-color: red;
    }
  </style>
</head>

<body>
  <div id="box"></div>
  <script>
    const box = document.querySelector('#box');

    function printMouseEventType(event) {
      if (event.type === 'mousemove') console.log('마우스가 움직인다.');
      if (event.type === 'mouseover') console.log('빼줘');
      if (event.type === 'mouseout') console.log('넣어줘');
    }

    box.addEventListener('mousemove', printMouseEventType);
    box.addEventListener('mouseover', printMouseEventType);
    box.addEventListener('mouseout', printMouseEventType);
  
  </script>
</body>

</html>

□ 마우스 포인터 좌표값 => event의 프로퍼티 값 3가지

● event. client X Y : 브라우저가 현재 열린 크기의 창 기준 X,Y 값

● event. page X Y : 문서 전체 기준 X ,Y 값

● event. offset X Y : 마우스 이벤트가 등록된 요소 내 기준 X,Y값

＃ 참고 : 좌측 상단의 모서리 위치를 (0, 0)으로 계산

● 연습문제2 : //이거 암기해놓으면 쓸모많이 있을 듯

부모 박스 안에 박스 4개가 존재할 때(cell1,2,3,4), 투명도를 줄여서 반짝 거리게 해보셈

CellEffect연습.zip

0.00MB

○ 풀이과정 :

- 순서1 : 가장 부모 Box를 변수에 저장

- 순서2 :

＊ 가장 부모 Box 요소노드의 classList에 'cell'이 있다면, //마우스 포인터가 cell에 들어있다면,

=> 그 해당 event.target의 classList에 .on클래스를 toggle한다.

- 순서3 :

* 마지막으로, 부모Box에 'mouseover', 'mouseout' 두 event.type에 순서2의 핸들러 메소드 등록

○ 답 :

    //순서1 : 부모 Box 요소 변수에 저장
    const Box2 = document.querySelector('#box2');

	//순서2 :
    function EffectCell(event)
    {
      if(event.target.classList.contains('cell'))//동작에 노드가 cell이 있을 경우
      {
        event.target.classList.toggle('on');//클래스 적용
      }
    }

    //순서3 :'mouseover' 'mouseout'에 Effect 메소드 핸들러 등록
    Box2.addEventListener('mouseover',EffectCell);
    Box2.addEventListener('mouseout',EffectCell);

□ 마우스 포인터로 요소간의 이동 경로 파악용 event객체 프로퍼티 => event.target + event.relatedTarget

event.target + 'mouseout' => 현재 마우스 포인터 놓여진 요소 노드 출력
event.relatedTarget + 'mousemove' => 마우스 포인터 요소 변경 직전의 요소노드 출력

● 연습문제3 :

얼마 전 월급이 오른 효준이는 큰맘 먹고 집을 이사했습니다. 비록 전셋집이지만 나름대로 만족스러운 집을 구했어요.

실습 창의 코드는 효준이가 장만한 새로운 집의 평면도를 HTML과 CSS로 구현한 코드입니다. 다만, 코드를 실행해보면 아직 각 공간이 어떤 공간인지는 표시되지 않았어요.

HTML 코드를 좀 더 자세히 살펴보니 몇몇 태그에 data-title 속성에 각 태그가 의미하는 공간이 어떤 공간인지 적혀있습니다.

data-title 속성과 자바스크립트를 활용해서 마우스 커서가 해당 태그 위로 올라가면 data-title 속성의 값이 나타나도록 코드를 완성해 주세요.

세부적인 조건은 다음과 같습니다.

1. showTitle 함수

showTitle 함수가 호출되면 가장 먼저 조건문을 통해 이벤트 객체의 target 프로퍼티에 담긴 요소에 data-title 속성의 값을 가지고 있는지 확인합니다.
조건문이 true일 경우 span 태그 형태의 요소 노드를 생성합니다.
이 요소 노드는 'title'이라는 class 값을 가지고 있어야 합니다.
이 요소 노드의 내부에 target 프로퍼티에 담긴 요소의 data-title 속성에 담긴 값을 할당해 주세요.
이 요소 노드를 target 프로퍼티에 담긴 요소의 마지막 자식 요소 노드로 추가해 주세요.

2. removeTitle 함수

removeTitle 함수가 호출되면 가장 먼저 조건문을 통해 이벤트 객체의 target 프로퍼티에 담긴 요소에 data-title 속성의 값을 가지고 있는지 확인합니다.
조건문이 true일 경우 이벤트 객체의 target 프로퍼티에 담긴 요소의 가장 마지막 자식 요소를 제거해 주세요.

3. 이벤트 핸들러 등록하기

앞서 만든 두 이벤트 핸들러를 하나의 요소 노드에만 등록해도 각 태그에 이벤트가 동작하도록 해주세요.
이벤트 위임을 고려했을 때 어떤 요소 노드에 이벤트 핸들러를 등록하면 좋을지 대상 부분을 수정해 주세요.
이벤트 위임을 고려했을 때 각각 타입의 이벤트로 이벤트 핸들러를 등록하면 좋을지 타입 부분을 수정해 주세요.

효준이네집.Zip

0.00MB

○ 전략 :

「 showTitle()

- 순서1_ 가장 부모 Box를 변수로 저장 => map

- 순서2_ 방의 이름을 갖고있는 태그를 어떻게 찾음? => data-title 속성값이 존재하는 태그 얘들

=> 조건문 + if(e.target.dataset.title);

- 순서3_ span 노드 추가 , 해당 태그의 자식에 쳐넣기 」

「 removeTitle()

- 순서4_ dataset.title 존재한다면, => if(e.target.dataset.title)

- 순서5_ 그 자식노드 삭제(span) 」

- 순서6_ showTitle() => 'mouseover'로 핸들러 등록 , removeTitle() => 'mouseout' 핸들러에 등록

○ 답 :


const map = document.querySelector('.map');

// showTitle 함수를 완성해 주세요
function showTitle(e) {
	// 여기에 코드를 작성하세요
  
  if(e.target.dataset.title)
  {
    const newNode = document.createElement('span');
    newNode.textContent = e.target.dataset.title;
    newNode.classList.add('title');

    e.target.append(newNode);

  }

}

// removeTitle 함수를 완성해 주세요
function removeTitle(e) {
	// 여기에 코드를 작성하세요
  if(e.target.dataset.title)
    {
      e.target.lastElementChild.remove();
    }

}

// '대상'과 '타입'을 수정해 주세요
map.addEventListener('mouseover', showTitle);
map.addEventListener('mouseout', removeTitle);

저작자표시

'CodeIt_Sprint > 인터렉티브_자바스크립트' 카테고리의 다른 글

(12)인터렉티브_자바스크립트_Input관련 이벤트.type (0)	2024.12.05
(11)인터렉티브_자바스크립트_키보드 관련 event (1)	2024.12.04
(9)인터렉티브_자바스크립트_event객체프로퍼티메소드 preventDefault() 메소드를 이용하여, 실습 3개 해보기(작성중) (2)	2024.11.29
(8)인터렉티브_자바스크립트_이벤트 버블링 (0)	2024.11.29
(7)인터렉티브_자바스크립트_태그에 이벤트 핸들러 등록,제거하기, 이벤트객체 => 동작에 대하여, 어떤 event동작, 태그항목이 관련되어있는지의 정보 객체 (0)	2024.11.29

코잼민의 코딩이야기

(10)인터렉티브_자바스크립트_마우스 클릭 관련 세부 event.type 3가지, 마우스 포인터 이동 관련 세부 event.type

□ 마우스 클릭 동작

● 동작1_ 마우스 왼쪽 한번 클릭

● 동작2_ 마우스 오른쪽 한번 클릭 ()

● 동작3_ 마우스 왼쪽 2번 연타 클릭 ()

● 확인할 수 있는 코드 , 브라우저

● 연습문제 :

실습 설명

실습 파일 :

□ 마우스 포인터 이동 동작

● 동작1_ 마우스 포인터 움직임 동작

● 동작2_ 마우스 포인터 요소 기준 :

□ 마우스 포인터 좌표값 => event의 프로퍼티 값 3가지

● event. client X Y : 브라우저가 현재 열린 크기의 창 기준 X,Y 값

● event. page X Y : 문서 전체 기준 X ,Y 값

● event. offset X Y : 마우스 이벤트가 등록된 요소 내 기준 X,Y값

● 연습문제2 : //이거 암기해놓으면 쓸모많이 있을 듯

○ 풀이과정 :

○ 답 :

□ 마우스 포인터로 요소간의 이동 경로 파악용 event객체 프로퍼티 => event.target + event.relatedTarget

● 연습문제3 :

1. showTitle 함수

2. removeTitle 함수

3. 이벤트 핸들러 등록하기

'CodeIt_Sprint > 인터렉티브_자바스크립트' 카테고리의 다른 글

티스토리툴바

(10)인터렉티브_자바스크립트_마우스 클릭 관련 세부 event.type 3가지, 마우스 포인터 이동 관련 세부 event.type

□ 마우스 클릭 동작

● 동작1_ 마우스 왼쪽 한번 클릭

● 동작2_ 마우스 오른쪽 한번 클릭 ()

● 동작3_ 마우스 왼쪽 2번 연타 클릭 ()

● 확인할 수 있는 코드 , 브라우저

● 연습문제 :

실습 설명

실습 파일 :

□ 마우스 포인터 이동 동작

● 동작1_ 마우스 포인터 움직임 동작

● 동작2_ 마우스 포인터 요소 기준 :

□ 마우스 포인터 좌표값 => event의 프로퍼티 값 3가지

● event. client X Y : 브라우저가 현재 열린 크기의 창 기준 X,Y 값

● event. page X Y : 문서 전체 기준 X ,Y 값

● event. offset X Y : 마우스 이벤트가 등록된 요소 내 기준 X,Y값

● 연습문제2 : //이거 암기해놓으면 쓸모많이 있을 듯

○ 풀이과정 :

○ 답 :

□ 마우스 포인터로 요소간의 이동 경로 파악용 event객체 프로퍼티 => event.target + event.relatedTarget

● 연습문제3 :

1. showTitle 함수

2. removeTitle 함수

3. 이벤트 핸들러 등록하기

'CodeIt_Sprint > 인터렉티브_자바스크립트' 카테고리의 다른 글

관련글

티스토리툴바