자세히 보기 기능 만들기

Part 4. 자세히 보기 기능 만들기

mouseover 이벤트 핸들러에서 타이머를 설정

<script>
      div.onmouseover = function(){
     setTimeout(function (){
        }, 1000); 
      }  
</script>

setTimeout callback함수에서 element에 접근

• classList에 접근하기 위해서는 해당 elment에 접근해야한다.
• onmouseover이벤트가 발생하는 익명함수 안에서는 this가 div이다.
• setTimeout이벤트에 의해서 호출되는 익명함수 안에서는
  this가 해당 div가 아니다.
• 이를 극복하기 위해서 함수의 scope에 대해서 생각해야한다.
• onmouse 이벤트 함수안에 element 변수에 this를 저장해두면
  setTimout이벤트에 의해 호출되는 익명함수 안에서 element를 접근했을 시
  익명함수 안에서 정의된 곳 밖에있는 변수 element에 접근이 가능하다.

  <script>
  div.onmouseover = function(){
  var element = this;
  setTimeout(function (){
  element.classList.add("image-magnified");
    }, 1000); 
  }
  div.onmouseout = function(){
  this.classList.remove("image-magnified");  
  }
  </script>

onmouseover 이벤트 핸들러에서 timerId 취소

element에 custom 속성을 기록하는 방식 사용

• 마우스 커서가 이미지에서 1초 안에 벗어나게 되면 추가되지 않은
  image-magnified 클래스를 제거하게되고
  1초 뒤에 이벤트가 발생하면서 image-magnified 클래스가 추가된다.
  그러면 이미지가 계속 확대된 채로 남아있는 에러가 발생한다.
• 따라서 onmouseout에서 setTimout이벤트를 취소시켜야한다.
  이를 위해서 timerId가 필요하다.

  <script>
  div.onmouseover = function(){
  var element = this;
  this.timerId = setTimeout(function (){
    element.classList.add("image-magnified")
    // 하나의 변수를 가지고 timerId을 기록할 수 없다.
    // this.timerId 속성을 새로 만들어 div태그에 임시로 timerId를 기록한다.
  }, 1000); 
  }
  div.onmouseout = function(){
  clearTimeout(this.timerId)
  // 인자로 this.timerId를 넘겨준다.
  this.classList.remove("image-magnified")
  }            
  </script>

추가적으로 다룬 내용

mouseover event : 마우스 커서가 엘리먼트 위에 올라간 경우 발생하는 이벤트이다.

mouseout event : 마우스 커서가 엘리먼트에서 밖으로 빠져 나간 경우 발생하는 이벤트이다.