예제 9-9. onclick 리스너로 계산기 만들기
WEB/JAVASCRIPT-CONCEPT 2017. 11. 2. 13:47 |4. 마우스 핸들링
* 마우스 이벤트 객체의 프로퍼티
프로퍼티
x,y // (x,y)는 타겟 객체의 부모 객체 내에서의 마우스 좌표
clientX, clientY // (clientX, clientY )는 브라우저 윈도우의 문서출력 영역 내에서의 마우스 좌표
screenX, ScreenY // (screenX, ScreenY)는 스크린을 기준으로 한 마우스 좌표
offsetX, offsetY // (offsetX, offsetY)는 타겟 객체 내에서의 마우스 좌표
button // 눌러진 마우스 버튼
0 : 아무 버튼도 눌러지지 않았음
1 : 왼쪽 버튼이 눌러졌음
2 : 오른쪽 버튼이 눌러졌음
3 : 왼쪽, 오른쪽 버튼이 모두 눌러졌음
4 : 중간 버튼이 눌러졌음
wheelDelta // 마우스 휠이 구른 방향
양수 : 위쪽으로 굴린 경우 (실제 WheelDelta 값은 120)
음수 : 아래쪽으로 굴린 경우 (실제 WheelDelta 값은 -120)
* onclick 과 ondblclick
onclick은 사용자가 HTML 태그를 클릭하였을 때,
onblclick은 더블클릭하였을 때 실행하는 이벤트 리스너
예제 9-9. onclick 리스너로 계산기 만들기
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 | <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>onclick</title> <script> function calculate() { var exp = document.getElementById("exp"); var result = document.getElementById("result"); result.value = eval(exp.value); } </script> </head> <body > <h3> onclick, 계산기 만들기</h3> <hr> 계산하고자 하는 수식을 입력하고 계산 버튼을 눌러봐요. <p> <form> 식 <input type="text" id="exp" value=""><br> 값 <input type="text" id ="result"> <input type="button" value=" 계산 " onclick="calculate()"> </form> </body> </html> | cs |
'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글
| 예제 9-13. onload에서 사이트 이전을 알리는 공고창 출력 (0) | 2017.11.02 |
|---|---|
| 예제 9-10. 마우스 관련 이벤트 리스너. 예제 9-11. onmousemove와 마우스 위치 및 버튼. 예제 9-12. oncontextmenu로 소스 보기나 이미지 다운로드 금지 (0) | 2017.11.02 |
| 예제 9-8. 이벤트 흐름//수정해야됨 (0) | 2017.11.02 |
| 예제 9-7. 이벤트의 디폴트 행동 취소 (0) | 2017.10.31 |
| 예제 9-6. 이벤트 객체의 프로퍼티 출력 (0) | 2017.10.31 |