별의 공부 블로그 🧑🏻‍💻
728x90
728x170
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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
<!-- 이벤트 객체 예제1-1 (파이어폭스, 크롬, 사파리, 오페라, IE 9 이상) -->
<script type="text/javascript">
    document.onkeydown=function(e){
        alert(e);
    }
</script>
 
<!-- 이벤트 객체 예제1-2 (IE 8 이하) -->
<script type="text/javascript">
    document.onkeydown=function(e){
        alert(window.event);
    }
</script>
 
<!-- 이벤트 객체 예제1-3 (모든 브라우저) -->
<script type="text/javascript">
    document.onkeydown=function(e){
        var eventObj=e?e:window.event;
        alert(eventObj);
    }
</script>
 
<!-- 이벤트 객체 예제2 -->
<script type="text/javascript">
    window.onload=function(){
        var form1=document.f1;
        var form2=document.f2;
        var eventObj;
        document.onmousemove=function(e){
            eventObj=e?e:window.event;
            var cx=eventObj.clientX;
            var cy=eventObj.clientY;
            form1.client_x.value=cx;
            form1.client_y.value=cy;
 
            var px=eventObj.pageX;
            var py=eventObj.pageY;
            form1.pg_x.value=px;
            form1.pg_y.value=py;
        }
        
        form2.key.onkeydown=function(e){
            eventObj=e?e:window.event;
            form2.code.value=eventObj.keyCode;
            if(eventObj.ctrlKey==true && eventObj.keyCode==71) {
                alert("단축키 실행");
            }
        }
    }
</script>
</head>
<body>
<div id="wrap">
    <h1>마우스 이벤트 객체 속성</h1>
    <form action="#" method="get" name="f1">
        <fieldset>
            <legend>커서 위치 추적</legend>
            <p>
            <label for="client_x">clientX</label>
            <input type="text" name="client_x" id="client_x" />
            </p>
            <p>
            <label for"pg_x">pageX</label>
            <input type="text" name="pg_x" id="pg_x" />
            </p>
            <p>
            <label for="client_y">clientY</label>
            <input type="text" name="client_y" id="client_y" />
            </p>
            <p>
            <label for"pg_y">pageY</label>
            <input type="text" name="pg_y" id="pg_y" />
            </p>
        </fieldset>
    </form>
    <h1>키보드 이벤트 객체 속성</h1>
    <form action="#" method="get" name="f2">
        <fieldset>
            <legend>키 코드값</legend>
            <p>
                <label for="#">입력 키보드 :</label>
                <input type="text" name="key" id="key" />
                <label for="">유니코드값 :</label>
                <input type="text" name="code" id="code" />
            </p>
        </fieldset>
    </form>
</div>
</body>
</html>
cs

 

 

소스 출처 : Do It! 자바스크립트+제이쿼리 입문 (정인용 지음, 이지스퍼블리싱)

728x90
그리드형(광고전용)
⚠️AdBlock이 감지되었습니다. 원할한 페이지 표시를 위해 AdBlock을 꺼주세요.⚠️
starrykss
starrykss
별의 공부 블로그 🧑🏻‍💻


📖 Contents 📖