학원/JS
11/09 39-3 [JS] MouseEvent
도원결의
2022. 11. 9. 21:52
[마우스 이벤트]
mousedown:태그영역에서 마우스 다운 시(클릭을 눌렀을 때)
mouseup:마우스 뗐을 때
mouseover:영역에 마우스가 들어 왔을 때
mouseout:영역에서 마우스가 나갔을 때
받은 HTML문서
<fieldset>
<legend id="legend">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="../HTML5/Images/1.jpg" alt="이미지" style="width:80px;height:60px;" />
</fieldset>
//1. 마우스 클릭했을 때 색상 변경하기
window.addEventListener('DOMContentLoaded',function(){ //전체적으로 로드 이벤트 !
//얻어오기
var legend=document.querySelector('#legend');
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;
//마우스이벤트 입히기
//1-1.마우스 다운
div1.onmousedown=function(e){
console.log('mousedown 이벤트 발생');
// 클릭 시 글씨도 변경
legend.textContent='mousedown이벤트 발생'
//배경색 변경하고 스케일 2배, 여기서의 this는 이벤트가 발생한 객체(=e.target)
this.style.backgroundColor='green';
this.style.width=width*2+'px';
this.style.height=height*2+'px';
}
//1-2.마우스 업
div1.onmousup=function(e){
console.log('mouseup 이벤트 발생');
legend.textContent='mouseup이벤트 발생';
//원래의 배경색 & 스케일로 변경
this.style.backgroundColor='red';
this.style.width=width+'px';
this.style.height=height+'px';
}
//2. 0.3초마다 위치 이동시키기(5번)
var count=0;
div2.onmousedown=function(){
console.log(this); //여기서 this는 mousedown이 발생 한 div2 객체
var timer = window.setInterval(function(){
console.log(this); //여기서this는 window 객체
var left = parseInt(div2.style.left);
div2.style.left=left+50+'px';
count++;
if(count === 5){
clearInterval(timer);
count=0;
}
},300); // 0.3초마다 발생
};
/* 문제 마우스오버 시에서 2.jpg로 교체
마우스 아웃 시 다시1
마우스 다운 시 현 이미지x2
마우스 업 다시 원래*/
var img =document.querySelector('img');
var imgWidth = parseInt(img.style.width)
var imgHeight = parseInt(img.style.height)
img.onmouseover = function(){
this.src="../HTML5/Images/2.jpg";
}
img.onmousedown = function(){
this.src="../HTML5/Images/1.jpg";
}
img.onmousedown = function(){
this.style.width=imgWidt*2+'px'
this.style.height=imgHeight*2+'px'
}
img.onmouseup = function(){
this.style.width=imgWidth+'px'
}
})
