예제 9-10. 마우스 관련 이벤트 리스너. 예제 9-11. onmousemove와 마우스 위치 및 버튼. 예제 9-12. oncontextmenu로 소스 보기나 이미지 다운로드 금지
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 13:58 |* onmousedown, onmouseup, onmouseover, onmouseout, onmouseenter, onmouseleave, onwheel
onmousedown : HTML 태그에 마우스 버튼을 누르는 순간
onmouseup : 눌러진 마우스 버튼이 놓여지는 순간
onmouseover : 마우스가 HTML 태그 위로 올라오는 순간. 자식 영역 포함 (사용추천)
onmouseout : 마우스가 HTML 태그를 벗어나는 순간. 자식 영역 포함 (사용추천)
onmouseenter : 마우스가 HTML 태그 위로 올라오는 순간. 이벤트 버블 단계 없음.
onmouseleave : 마우스가 HTML 태그를 벗어나는 순간. 이벤트 버블 단계 없음.
onwheel : HTML 태그에 마우스 휠이 구르는 동안 계속 호출
ex)
obj.onwheel = function(e) // onwheel 리스너 익명함수
{
if(e.wheelDelta < 0) // 아래쪽으로 휠을 굴린 경우
{...}
else // 위쪽으로 휠을 굴린 경우
{...}
}
예제 9-10. 마우스 관련 이벤트 리스너.
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>마우스 관련 리스너</title> <script> var width=1; // 테두리 두깨 function down(obj) { obj.style.fontStyle = "italic"; } function up(obj) { obj.style.fontStyle = "normal"; } function over(obj) { obj.style.borderColor = "violet"; // 테두리 폭이 0일 때 색은 보이지 않는다. } function out(obj) { obj.style.borderColor = "lightgray"; } function wheel(e, obj) { // e는 이벤트 객체 if(e.wheelDelta < 0) { // 휠을 아래로 굴릴 때 width--; // 폭 1 감소 if(width < 0) width = 0; // 폭이 0보다 작아지지 않게 } else // 휠을 위로 굴릴 때 width++; // 폭 1 증가 obj.style.borderStyle = "ridge"; obj.style.borderWidth = width+"px"; } </script> </head> <body > <h3>마우스 관련 이벤트 리스너</h3> <hr> <div>마우스 관련 <span onmousedown="down(this)" // 마우스를 눌렀을때 onmouseup="up(this)" // 초기화면 onmouseover="over(this)" // 마우스 올릴때 onmouseout="out(this)" // 마우스 내릴때 onwheel="wheel(event, this)">이벤트 // 휠로 조절 </span>가 발생합니다. </div> </body> </html> | cs |
마우스휠을 위로 굴릴 때 두께가 1씩 두꺼워진다. (onwheel)
* onmousemove
onmousemove 리스너는 마우스가 움직이는 동안 계속 호출된다.
예제 9-11. onmousemove와 마우스 위치 및 버튼.
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>마우스 이벤트 객체의 프로퍼티</title> <style> div { background : skyblue; width : 250px; } </style> </head> <body> <h3>마우스 이벤트 객체의 프로퍼티와 onmousemove</h3> <hr> 이미지 위에 마우스를 움직일 때 onmousemove 리스너가 실행되고, 마우스의 위치를 보여줍니다.<p> <img src="media/beach.png" onmousemove="where(event)"><p> <div id="div"></div> <script> var div = document.getElementById("div"); function where(e) { var text = "버튼=" + e.button + "<br>"; text += "(screenX, screenY)=" + e.screenX + "," + e.screenY + "<br>"; text += "(clientX, clientY)=" + e.clientX + "," + e.clientY + "<br>"; text += "(offsetX, offsetY)=" + e.offsetX + "," + e.offsetY + "<br>"; text += "(x, y)=" + e.x + "," + e.y + "\n"; div.innerHTML = text; // text를 <div> 태그에 출력 } </script> </body> </html> | cs |
* oncontextmenu
사용자가 브라우저의 바탕화면(<body>태그)이나 HTML 태그 위에 마우스 오른쪽 버튼을 클릭할 때 출력되는 메뉴를
컨텍스트 메뉴(context menu)라고 한다. 컨텍스트 메뉴에는 보통 소스 보기나 이미지 다운로드 등의 기능을 둔다.
하지만, 컨텍스트 메뉴가 출력되기 전에 oncontextmenu 리스너가 먼저 호출되므로 여기서 개발자가 특별한 작업을 할수 있다.
oncontextmenu 리스너가 false를 리턴하면 컨텍스트 메뉴가 출력되는 디폴트 행동을 취소하여 소스 보기나 이미지 다운로드를 할 수 없게 된다.
ex)
document.oncontextmenu = fuction()
{
...
return false; // 컨텍스트 메뉴 출력 금지
}
예제 9-12. oncontextmenu로 소스 보기나 이미지 다운로드 금지
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>oncontextmenu</title> <script> function hideMenu() { alert("오른쪽 클릭<컨텍스트 메뉴>금지"); return false; } document.oncontextmenu=hideMenu; // oncontextmenu 리스너 등록 </script> </head> <body> <h3>oncontextmenu에서 컨텍스트 메뉴 금지</h3> <hr> 마우스 오른쪽 클릭은 금지됩니다. 아무곳이나 클릭해도 컨텍스트 메뉴를 볼 수 없습니다.<br> <img src="media/beach2.png" alt="miami"> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-14. onload로 이미지 크기 알아내기 (0) | 2017.11.02 |
|---|---|
| 예제 9-13. onload에서 사이트 이전을 알리는 공고창 출력 (0) | 2017.11.02 |
| 예제 9-9. onclick 리스너로 계산기 만들기 (0) | 2017.11.02 |
| 예제 9-8. 이벤트 흐름//수정해야됨 (0) | 2017.11.02 |
| 예제 9-7. 이벤트의 디폴트 행동 취소 (0) | 2017.10.31 |