티스토리 뷰

프론트엔드/JavaScript

[다양한 이벤트 알아보기] 06. mouseenter / mouseleave

yyoujg 2022. 11. 27. 14:55

마우스 이벤트 타입에는 mouseover, mouseout과 비슷한 mouseenter와 mouseleave라는 타입이 있습니다.

이름에서도 알 수 있듯이 mouseenter는 mouseover처럼 마우스 포인터가 요소 바깥에서 안쪽으로 들어갈 때, mouseleave는 mouseout처럼 마우스 포인터가 요소 안쪽에서 바깥으로 나갈 때 발생합니다.

 

일단 아래의 결과보기 버튼을 눌러서 코드를 한 번 실행해 봅시다.

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <title>JS with Codeit</title>
  </head>
  <body>
    <div id="box1" class="box">
      <b class="title">mouseover event count: 0</b>
    </div>

    <div id="box2" class="box">
      <b class="title">mouseenter event count: 0</b>
    </div>
    <script>
      const box1 = document.querySelector('#box1');
      const box2 = document.querySelector('#box2');

      let mouseenterCount = 0;
      let mouseoverCount = 0;

      box1.addEventListener('mouseover', function () {
        mouseenterCount++;
        const msg = `mouseover event count: ${mouseenterCount}`;
        box1.lastElementChild.textContent = msg;
      });

      box2.addEventListener('mouseenter', function () {
        mouseoverCount++;
        const msg = `mouseenter event count: ${mouseoverCount}`;
        box2.lastElementChild.textContent = msg;
      });
    </script>
  </body>
</html>

위 코드에서는 mouseover와 mouseenter를 비교했지만, mouseout과 mouseleave의 관계도 동일하다는 점 참고해주세요!

아무튼, 이 둘의 차이를 살펴봅시다.

1. 버블링이 일어나지 않는다.

mouseenter와 mouseleave는 버블링이 일어나지 않습니다.

위 코드 결과에서 mouseover 타입으로 이벤트 핸들러가 등록된 div#box1요소(왼쪽)에서 마우스를 움직이면

당연히 해당 요소 바깥에서 안쪽으로 마우스 커서가 이동할 때도 이벤트가 발생하지만, 버블링과 이벤트 위임의 원리로 자식요소인 b.title 부분으로 마우스 커서가 이동할 때도 이벤트가 발생합니다.

하지만 mouseenter 타입으로 이벤트 핸들러가 등록된 div#box2요소(오른쪽)에서는 해당 요소 바깥에서 안쪽으로 마우스 커서가 이동할 때만 이벤트 핸들러가 동작하는 모습을 확인할 수 있습니다.

2. 자식 요소의 영역을 계산하지 않는다.

mouseenter와 mouseleave는 자식 요소의 영역을 계산하지 않습니다.

다시 mouseover 타입으로 이벤트 핸들러가 등록된 div#box1요소(왼쪽)에서 마우스를 움직이면

버블링에 의해 자식 요소로 마우스 커서가 이동할 때도 이벤트 핸들러가 동작하지만, 자식 요소에서 다시 div#box1요소로 마우스 커서가 이동할 때도 이벤트 핸들러가 동작하죠? mouseover는 자식 요소의 영역을 구분하기 때문입니다.

반면, mouseenter는 자식 요소의 영역을 구분하지 않기 때문에 mouseenter 타입으로 이벤트 핸들러가 등록된 div#box2요소(오른쪽)에서는 자식 요소에서 이벤트 핸들러가 동작하지 않는 것뿐만 아니라 자식 요소의 영역에 들어갔다 나올 때도 이벤트 핸들러가 동작하지 않는 모습을 볼 수 있습니다.

정리

mouseover/mouseout과 비교하면서 mouseenter/mouseleave에 대해 살펴봤는데요.

간단하게 정리하면, 이벤트가 자식 요소에 영향끼치는지가 둘의 가장 큰 차이라고 할 수 있습니다.

그래서 이벤트 핸들러가 자식 요소에까지 영향을 끼치게 하고싶은 경우에는 mouseover/mouseout을, 자식 요소에는 영향을 끼치지 않고 해당 요소에만 이벤트 핸들러를 다루고자 한다면 mouseenter/mouseleave를 활용하면 좋을것 같습니다.

 

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

[다양한 이벤트 알아보기] 10. input 태그 다루기  (0) 2022.11.28
[다양한 이벤트 알아보기] 08. 키보드 이벤트  (0) 2022.11.27
[다양한 이벤트 알아보기] 05. 마우스 이동 이벤트 II  (0) 2022.11.27
[다양한 이벤트 알아보기] 04. client, page, offset 차이  (0) 2022.11.27
[다양한 이벤트 알아보기] 03. 마우스 이동 이벤트 I  (0) 2022.11.27
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2024/11   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
글 보관함