[ex13~14] Mouse Event, Key Event

ex13

 

Mouse Event, 마우스 관련 이벤트

- onmouseXXX

 

1. onmouseover(= onmouseenter)
    - 해당 객체의 영역에 마우스(커서)가 진입하는 순간 발생

2. onmouseout(= onmouseleave)
    - 해당 객체의 영역에 마우스(커서)가 빠져나가는 순간 발생

	<script>
        function message(txt) {
            var now = new Date();
            txt1.value = txt + '-' + now.toLocaleTimeString() + '\r\n' + txt1.value; /* 누적 */
        }

        txt1.onmouseover = m1;
        function m1() {
            message('mouseover');
            window.document.body.bgColor = 'gold';
        }

        txt1.onmouseout = m2;
        function m2() {
            message('mouseout');
            window.document.body.bgColor = 'white';
        }
    </script>

 

화면

마우스 관련 이벤트

 

3. onmousedown

- 해당 객체의 영역에서 마우스 버튼을 누르는 순간 발생

 

-마우스 어떤 버튼?

 event.buttons

왼쪽(1), 오른쪽(2), 왼쪽+오른쪽(3), 휠버튼(4)

 

-마우스 커서 좌표

1. x, y (잘안씀)
  - 문서 좌측 상단을 기준
  - 비표준(MS-IE) > 비권장

2. clientX, clientY (*****)
  - 문서 좌측 상단을 기준
  - 표준 > 권장
  - CSS > position: absolute;와 비슷 > 엮어서 제작
            
3. screenX, screenY (잘안씀)

  - 모니터 좌측 상단을 기준

4. offsetX, offsetY (*****)

  - 이벤트 객체의 좌측 상단을 기준

  - 나 자신이 기준

  - CSS > position: relative; 와 비슷

 

4. onmouseup
- 해당 객체의 영역에서 마우스 버튼을 떼는 순간 발생

	<script>
        function message(txt) {
            var now = new Date();
            txt1.value = txt + '-' + now.toLocaleTimeString() + '\r\n' + txt1.value; /* 누적 */
        }

        txt1.onmouseover = m1;
        function m1() {
            //message('mouseover');
            //window.document.body.bgColor = 'gold';
        }

        txt1.onmouseout = m2;
        function m2() {
            //message('mouseout');
            //window.document.body.bgColor = 'white';
        }

        txt1.onmousedown = m3;
        function m3() {
            // message('mousedown');
            // window.document.body.bgColor = 'tomato';

            //마우스 어떤 버튼?
            //event.buttons

            //왼쪽(1), 오른쪽(2), 왼쪽+오른쪽(3)
            // message(event.buttons);

            // if (event.buttons == 2) {
            //      alert('오른쪽 마우스 버튼 클릭 금지!!!');
            // }

            //마우스 커서 좌표
            //1. x, y
            //  - 문서 좌측 상단을 기준
            //  - 비표준(MS-IE) > 비권장

            //2. clientX, clientY *****
            //  - 문서 좌측 상단을 기준
            //  - 표준 > 권장
            //  - CSS > position: absolute;와 비슷 > 엮어서 제작

            //3. screenX, screenY (다루기 어려움 > 잘 안씀)
            //  - 모니터 좌측 상단을 기준

            //4. offsetX, offsetY *****
            //  - 이벤트 객체의 좌측 상단을 기준
            //  - 나 자신이 기준
            //  - CSS > position: relative; 와 비슷

            // message(event.x + ',' + event.y)
            // message(event.clientX + ',' + event.clientY);
            //message(event.screenX + ',' + event.screenY);
            //message(event.offsetX + ',' + event.offsetY);
        }

        txt1.onmouseup = m4;
        function m4() {
            // message('mouseup');
            // window.document.body.bgColor = 'white';
        }

    </script>

 

화면

마우스 관련 이벤트

 

5. onmousemove
- 해당 객체의 영역에서 마우스가 움직일때마다 발생

<script>
    txt1.onmousemove = m5;
    function m5() {
        // message('mousemove');
    }
</script>

 

*** onclick

- 마우스 이벤트(X) / 키보드 등으로도 클릭 가능

- onclick 내에서는 마우스에 대한 정보를 알 수 없다.
- 어떤 버튼? 좌표? > 정의 불가능

---

ex14

 

Key Event, 키 이벤트

- onkeyXXX
- 포커스를 가지는 태그에서만 발생(텍스트 박스, 체크 박스 등)

- 발생 순서: keydown > keypress > keyup

 

평상시 키 이벤트 > keydown
특별히 누른 키가 관여된 작업 > keyup

 

1. onkeydown
    - 키를 눌렀을 때 발생

    - 문자에 반응하는 이벤트(X) > 어떤 문자가 입력되었는지(X)
    - 물리키에 반응하는 이벤트 > 어떤 키를 눌렀는지(O)

    - 키보드에 존재하는 모든 키에 반응(******)

    - 방금 입력한 문자는 필요없을 때 사용!!

2. onkeyup
    - 키를 뗐을 때 발생

    - 물리키 반응

    - 방금 입력한 문자가 필요한 경우에 사용!!

3. onkeypress(잘 사용 안함)
    - 키를 눌렀을 때 발생

    - 문자에 반응하는 이벤트(O)
    - 문자가 아닌 키는 반응 안함(*****) 

 

<script>
        txt1.onkeydown = m1;
        txt1.onkeyup = m2;
        txt1.onkeypress = m3;

        function m1(evt) {
            // console.log('keydown');

            //event.keyCode
            // 비표준 방법 
            // console.log(event.keyCode);

            // 표준 방법 > 매개변수
            // console.log(evt.keyCode);

            //방향키
            //- 좌(37), 상(38), 우(39), 하(40)
            // if (evt.keyCode == 37) {
            //     txt3.cols--;
            // } else if (evt.keyCode == 39) {
            //     txt3.cols++;
            // } else if (evt.keyCode == 38) {
            //     txt3.rows--;
            // } else if (evt.keyCode == 40) {
            //     txt3.rows++;
            // }

            // 첫번째 텍스트 박스 값을 두번째 박스에 복사
            // keydown > 한박자 느림
            //txt2.value = txt1.value;
        }
        function m2() {
            // console.log('keyup');
            // console.log(event.keyCode); 

            // keyup > 바로 적용됨
            //txt2.value = txt1.value;
        }
        function m3() {
            // console.log('keypress');
            // console.log(event.keyCode);
        }
</script>