mouseover / mouseenter 차이, mouseleaver / mouseout 차이

최근 이벤트를 공부하며 헷갈리는 부분이 있어 정리해 보았습니다.

이벤트에 관한 기본적인 이론은 다음 글에서 확인 할 수 있습니다.

https://hoime.tistory.com/76

[9주차 스터디]40장-이벤트

이벤트 브라우저는 처리해야 할 특정 사건이 발생하면 이벤트( event )를 발생 시킵니다. 특정 타입의 이벤트에 대해 호출 될 함수를 브라우저에게 알려 호출을 위임 한다. 이벤트가 발생했을 때

hoime.tistory.com

마우스 이벤트를 보면 mouseenter 이벤트와 mouseover 이벤트는 유사하게 동작 합니다.

반대되는 동작인 mouseleave와 mouseout 이벤트 역시 유사하게 동작 됩니다.

그렇다면 두 이벤트에 차이를 검색해 보면 자식 요소에서 영향을 주는지 여부에 따라 구분할 수 있습니다.

틀린 설명은 아니지만, 정확한 동작을 이해하기 위해서는 캡처링과 버블링을 개념을 알아야 합니다.

간단하게 정의해 본다면

capturing

캡처링이란 이벤트가 상위 요소에서 하위 요소 방향으로 전파되는 과정을 말합니다.

이벤트가 발생하면 이벤트 객체가 생성되고 최상위(브라우저의 최상위 객체는 window) 부터 해당 이벤트 타겟 방향으로 전파 되는 것을 말합니다.

bubbling

버블링이란 캡처링 단계를 거쳐 이벤트 타겟에서 상위요소로 이벤트가 전파되는 과정을 말합니다.

이 단계에서 상위 요소에서 이벤트가 캐치 될 수 있습니다.

capturing 같은 경우는 이벤트 리스너 등록 시 캡처링 여부를 설정 해줘야 합니다.

bubbling 은 기본적으로 상위요소로 이벤트가 전파되는 과정에서 실행 됩니다.

위 이론을 이해하고 마우스 이벤트의 동작과 차이를 알아보면 다음과 같습니다.

mouse 이벤트

mouseenter : 마우스 커서를 HTML 요소 안으로 이동했을 때 발생 (버블링 되지 않는다)

mouseover : mouseenter 와 동일하게 마우스 커스를 HTML 요소 안으로 이동했을 때 발생 (버블링 된다)

mouseleave : 마우스 커서를 HTML 요소 밖으로 이동했을 때 발생 (버블링 되지 않는다)

mouseout : mouseleave 와 동일하게 마우스 커서를 HTML 요소 밖으로 이동했을 때 발생 (버블링 된다)

즉, 정리하자면 mouseover 와 mouseleave는 버블링 단계에서 캐치 되기 때문에 하위 요소에서 이벤트 발생 시 상위 요소에 영향을 줄 수 있습니다.

간단한 예제를 브라우저에서 생행해 보면 쉽게 이해할 수 있습니다.

<!DOCTYPE html>
<html>
<style>
  .over{
    display: flex;
    background-color: antiquewhite;
    width: 300px;
    height: 300px;
    align-items: center;
    justify-content: center;

  }
  .out {
    background-color: aqua;
    width: 150px;
    height: 150px;
  }
  .enter{
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: lightcoral;
    width: 300px;
    height: 300px;
  }
  .leave {
    background-color: firebrick;
    width: 150px;
    height: 150px;
  }
</style>
<body>
  <div class="over">
    <div class="out"></div>
  </div>
  <hr/>
  <div class="enter">
    <div class="leave"></div>
  </div>
  <script>
    const over = document.querySelector('.over');
    const out = document.querySelector('.out');
    const enter = document.querySelector('.enter');
    const leave = document.querySelector('.leave');

    over.addEventListener('mouseover',()=>{
      console.log('outerDiv 에서 mouseover 발생');
    });

    out.addEventListener('mouseout', ()=>{
      console.log('innerDiv 에서 mouseout 발생');
    });
    enter.addEventListener('mouseenter', ()=>{
      console.log('outerDiv 에서mouseenter 발생');
    });
    leave.addEventListener('mouseleave', ()=>{
      console.log('innerDiv 에서 mouseleave 발생');
    }); 
  </script>
</body>
</html>

'javascript > 👀 tips' 카테고리의 다른 글

맥북 초기 세팅 기록 (0)	2023.08.15
scrollIntoVeiw로 스크롤 항상 아래로 유지하기(+ 키보드 Enter 이벤트) (0)	2022.06.30

homie's blog

mouseover / mouseenter 차이, mouseleaver / mouseout 차이

capturing

bubbling

mouse 이벤트

'javascript > 👀 tips' 카테고리의 다른 글

댓글

티스토리툴바

mouseover / mouseenter 차이, mouseleaver / mouseout 차이

capturing

bubbling

mouse 이벤트

'javascript > 👀 tips' 카테고리의 다른 글

관련글

댓글

티스토리툴바