[JS]Mouse Event

 <fieldset>
    <legend id="title">mousedown 및 mouseup이벤트(scale 및 색상변경)</legend>
    <div style="background-color:red;width:100px;height:100px"></div>
</fieldset>
<fieldset>
    <legend>mousedown 이벤트(위치이동)</legend>
    <div style="position:relative;left:0;top:0;background-color:red;width:100px;height:100px"></div>
</fieldset>
<fieldset>
    <legend>mouseover 및 mouseout이벤트</legend>
    <h4>테이블에 적용</h4>
    <table style="border-spacing:1px;background-color:gray;width:400px">
        <tr style="background-color:white">
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
        </tr>
        <tr onmouseover="this.style.backgroundColor='green';" onmouseout="this.style.backgroundColor='white';"
            style="background-color:white">
            <td>1</td>
            <td>제목1입니다</td>
            <td>작성자1</td>
        </tr>
        <tr onmouseover="this.style.backgroundColor='green';" onmouseout="this.style.backgroundColor='white';"
            style="background-color:white">
            <td>2</td>
            <td>제목2입니다</td>
            <td>작성자2</td>
        </tr>
        <tr onmouseover="this.style.backgroundColor='green';" onmouseout="this.style.backgroundColor='white';"
            style="background-color:white">
            <td>3</td>
            <td>제목3입니다</td>
            <td>작성자3</td>
        </tr>
    </table>
    <h4>이미지에 적용</h4>
      <img src="../Images/1.jpg" alt="이미지" style="width:80px;height:60px;" />
</fieldset>

 

▲현재 body상태

 

 

 

 window.addEventListener('DOMContentLoaded',function(){
      var legend = document.querySelector('#title');
      var div1 = document.querySelector('fieldset:nth-child(1) > div');
      var div2 = document.querySelector('fieldset:nth-child(2) > div');

      var width = parseInt(div1.style.width);
      var height = parseInt(div1.style.height);
      var bgcolor = div1.style.backgroundColor;

      div1.onmousedown=function(e){
        //이벤트 핸들러안에서의 this는 이벤트가 발생한 객체 즉 e.target와 같다
        legend.innerHTML='mousedown이벤트 발생';
        //배경색 변경하고  스케일을 두배로
        this.style.backgroundColor='green';
        this.style.width = width * 2 +'px';
        this.style.height = height * 2 +'px';
      };
      div1.onmouseup=function(e){
        legend.innerHTML='mouseup이벤트 발생';
         //원래 배경색 및 스케일로 변경
         this.style.backgroundColor=bgcolor;
         this.style.width = width +'px';
         this.style.height = height  +'px';
      };
      var count=0;
      div2.onmousedown=function(){
        
        var timer=window.setInterval(function(){
            console.log(this);//window객체
            count++;
            if(count===5){
              clearInterval(timer);
              count=0;
            }
            var left = parseInt(div2.style.left);
            div2.style.left=left+50+'px';
        },300);
      };

      /*
        마우스 오버시에 2.jpg로 교체
        마우스 아웃시에는 다시 1.jpg로 교체
        마우스 다운시에는 현재 이미지 크기의 2배로 변경
        마우스 업시에는 다시 원래 이미지 크기로 변경
      */
     var img = document.querySelector('fieldset:nth-child(3) > img');
     var imgWidth=parseInt(img.style.width);
     var imgHeight=parseInt(img.style.height);

     img.onmouseover = function(){
      this.src='../Images/2.jpg';
     };
     img.onmouseout = function(){
      this.src='../Images/1.jpg';
     };
     img.onmousedown=function(){
       this.style.width =imgWidth*2+'px';
       this.style.height =imgHeight*2+'px';
     };
     img.onmouseup=function(){
       this.style.width =imgWidth+'px';
       this.style.height =imgHeight+'px';
     };


    });