[Javascript] 자바스크립트 마우스 이벤트(mouse event)
- 웹 개발/Javascript
- 2019. 4. 6. 23:05
마우스 사용할때 발생하는 이벤트
- onmouseXXX 로 시작
1. onmouseover : 해당 객체의 영역위에 커서가 진입하는 순간 발생
2. onmouseout : 해당 영역에서 커서가 빠져나가는 순간 발생
3. onmousedown : 해당 객체의 영역에서 마우스 버튼이 눌려지는 순간 발생
4. onmouseup : 해당 객체의 영역에서 마우스 버튼이 떼는 순간 발생
5. onmousemove : 해당 객체의 영여겡서 커서가 움직이는 순간 발생
어느 버튼을 사용했는지?
event 객체
- 이벤트에 의해서 호출되는 함수에서 사용하는 예약어
- 발생한 사건의 여러가지 정보를 제공 객체
- 마우스 왼쪽 버튼에 반응
if(event.buttons == 1){
txt1.value="마우스 다운";
}
var txt1 = window.document.form1.txt1;
txt1.onmouseover = test; *///함수이름만 넣을것. () 쓰지말고
txt1.onmouseover = function (){//익명함수
alert('테스트2');
}
var btn1= window.document.form1.btn1;
console.log(btn1==null);
btn1.onclick = function(){
//클릭했을때 하고싶은 일을 안에 기술
txt1.value="클릭했습니다";
}
마우스 포인터 좌표
1. x,y
- 문서의 좌측상단을 기준점으로함.
- 비표준
2. clientX, clientY
- 문서 좌측 상단을 기준점으로 함
- 표준
- 많이 사용(absolute)
3. screenX, screenY
- 모니터 화면의 좌측 상단을 기준점으로 함
- 잘 안씀
4. offsetX, offsetY
- 이벤트 발생한 객체(태그)의 좌측상단을 기준점
- 많이 사용(relative)
마우스 이벤트 예제
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 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <style> textarea{ width:500px; height:400px; margin:30px; } </style> <script> function init(){ var txt1 = window.document.form1.txt1; txt1.onmouseover = function(){ /* txt1.value="mouseover\r\n"+txt1.value; */ /* window.document.body.bgColor="white"; */ }; txt1.onmouseout= function(){ /* txt1.value="mouseout\r\n"+txt1.value; */ }; txt1.onmousedown=function(){ /* txt1.value=event.x + ","+event.y; */ /* txt1.value=event.clientX + ","+event.clientY; */ /* txt1.value=event.screenX + ","+event.screenY; */ /* txt1.value=event.offsetX + ","+event.offsetY; */ }; txt1.onmouseup=function(){ /* txt1.value="mouseup\r\n"+txt1.value; */ }; txt1.onmousemove = function(){ /* txt1.value="mousemove\r\n"+txt1.value; */ txt1.value=event.clientX+":"+event.clientY+"\r\n"+txt1.value; /* window.document.form1.txt2.size=event.clientX/2; */ if(event.clientX %3==0){ window.document.body.bgColor="yellow"; }else if(event.clientX %3==1){ window.document.body.bgColor="red"; }else if(event.clientX %3==2){ window.document.body.bgColor="green"; } }; }//init; function test(){ alert("테스트"); } </script> <title></title> <link rel="stylesheet" href="/WebClientTest/css/css/basic.css"> </head> <body onload="init();"> <!-- 동적으로 이벤트 --> <form name ="form1"> <textarea name="txt1" id="txt1"></textarea> <input type="button" name="btn1" value="버튼1"/> <br /> <input type="text" name="txt2" /> </form> </body> </html> | cs |
'웹 개발 > Javascript' 카테고리의 다른 글
| [Javascript] 자바스크립트 HTML 태그 속성 제어, window onload 함수(BOM) (1) | 2019.04.07 |
|---|---|
| [Javascript] 자바스크립트 키보드 관련 이벤트(onkeydown, onkeyup, onkeypress) (0) | 2019.04.07 |
| [Javascript] 자바스크립트 이벤트(Event) (0) | 2019.04.06 |
| [Javascript] 자바스크립트, BOM(Broser Object Model) (0) | 2019.04.06 |
| [Javascript] 자바스크립트 배열(Array) (0) | 2019.04.06 |