그럼에도 불구하고

👨‍💻

[JavaScript] 마우스 이벤트란? 본문

JavaScript/JavaScript basics

[JavaScript] 마우스 이벤트란?

zenghyun 2023. 1. 10. 16:11

 

마우스 이벤트에 대해 알아보자

 

 

 

[ mousedown ] 

마우스 버튼을 누르는 시점에 발생하는 이벤트 

 

[ mouseup ] 

마우스 버튼을 떼는 시점에서 발생하는 이벤트

 

[ mousemove ] 

마우스를 움직이는 시점에서 발생하는 이벤트 

 

 

 

[ mouseenter ] 

포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트

 

[ mouseleave ] 

포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트

 

※ 포인팅 디바이스

마우스, 터치 패드 등을 가리킴

 

 

[ mouseover ] 

포인팅 디바이스가 요소의 위치에 있을 때 발생하는 이벤트 (이벤트 버블링) 

 

[ mouseout ] 

포인팅 디바이스가 요소를 벗어날 때 발생하는 이벤트 (이벤트 버블링)

 

※ mouseover와 mouseout 이벤트는 포인팅 디바이스(마우스, 터치 패드 등)가 요소 위에 있거나 요소를 벗어날 때 발생하는 이벤트로 mouseenter, mouseleave와 다르게 이벤트 버블링이 일어난다.

 

버블링이란, 자식 요소에서 발생한 이벤트가 부모 요소까지 전달되는 것을 말한다. 

 

예를 들어 버블링이 일어나는 mouseover의 이벤트 리스너를 부모와 자식 요소 모두 설정하면, 자식 요소에서 발생한 이벤트가 부모 요소에서도 발생하여 부모 요소의 이벤트 리스너도 함께 실행된다.  

 

 

 

실제로 구현했을 때 어떤 식으로 이벤트가 발생하는지 알아보자

 

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .container {
      display: flex;
      font-size: 40px;
      font-weight: bold;
    }

    .eventArea1 {
      width: 400px;
      height: 300px;
      border: 3px solid black;
      margin: 30px auto;
    }

    .eventArea2 {
      width: 400px;
      height: 300px;
      border: 3px solid black;
      margin: 30px auto;
    }

    .eventArea3 {
      width: 400px;
      height: 300px;
      border: 3px solid black;
      margin: 30px auto;
    }

    .inner {
      width: 200px;
      height: 100px;
      border: 3px solid black;
      margin: 30px auto;
    }

    .textContainer {
      display: flex;
      justify-content: space-evenly;

    }

    p {
      font-size: 25px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="eventArea1">box1</div>
    <div class="eventArea2">box2</div>
    <div class="eventArea3">box3
      <div class="inner">inner</div>
    </div>
  </div>
  <div class="textContainer">
    <p class="p1"></p>
    <p class="p2"></p>
    <p class="p3">
    <p class="p4"></p>
    </p>

  </div>

  <script>
    const eventArea1 = document.querySelector('.eventArea1');
    const eventArea2 = document.querySelector('.eventArea2');
    const eventArea3 = document.querySelector('.eventArea3');
    const inner = document.querySelector('.inner');
    const p1 = document.querySelector('.p1');
    const p2 = document.querySelector('.p2');
    const p3 = document.querySelector('.p3');
    const p4 = document.querySelector('.p4');

    eventArea1.addEventListener('mousedown', () => {
      p1.innerHTML = `마우스 버튼을 box1에서 누름 <br>
      mousedown 상태 `;
    })

    eventArea1.addEventListener('mouseup', () => {
      p1.innerHTML = `마우스 버튼을 box1에서 뗌 <br>
      mouseup 상태`;
    })

    eventArea1.addEventListener('mousemove', () => {
      p1.innerHTML = `마우스가 box1에서 움직임 <br>
      mousemove 상태`;
    })

    eventArea1.addEventListener('mouseleave', () => {
      p1.innerHTML = `마우스가 box1 위에서 벗어남 <br>
      mouseleave 상태`
    })

    eventArea2.addEventListener('mouseenter', () => {
      p2.innerHTML = `마우스가 box2 위에 위치하고 있음 <br>
      mouseenter 상태`
    })

    eventArea2.addEventListener('mouseleave', () => {
      p2.innerHTML = `마우스가 box2 위에서 벗어남 <br>
      mouseleave 상태`
    })

    eventArea3.addEventListener('mouseover', () => {
      p3.innerHTML = `마우스가 box3 위에 위치 <br>
      mouseover 상태`
    })
    inner.addEventListener('mouseover', () => {
      p4.innerHTML = `마우스가 inner 위에 위치 <br>
      mouseover 상태`
    })

    eventArea3.addEventListener('mouseout', () => {
      p3.innerHTML = `마우스가 box3 위에서 벗어남 <br>
      mouseout 상태`
      p4.innerHTML = ``;
    })
  </script>
</body>

</html>

 

 

※ 0.25배율로 확인 권장

 

See the Pen Untitled by zenghyun (@zenghyun) on CodePen.

 

 

 

저작자표시 비영리

'JavaScript > JavaScript basics' 카테고리의 다른 글

[JavaScript] 심벌이란?  (0) 2023.01.18
[JavaScript] 정규표현식이란?  (0) 2023.01.16
[JavaScript] 이벤트 리스너 1회 실행 / 삭제  (0) 2023.01.10
[JavaScript] FileReader 객체에 대해 알아보자  (0) 2023.01.05
[JavaScript] encodeURI / decodeURI란?  (0) 2023.01.03
'JavaScript/JavaScript basics' Related Articles more
Comments