[JavaScript] Event Handling + 마우스 이벤트 + 키 이벤트

WEB/JavaScript

[JavaScript] Event Handling + 마우스 이벤트 + 키 이벤트

developer of the night sky 2023. 10. 5. 14:43

🔻Event🔻

객체에서 발생하는 사건
언제 발생할지 예측 불가능하다.

🔻Event Handling🔻

이벤트를 처리 및 등록한다.
언제 발생할지 예측 불가능한 사건에 대비하여 미리 처리할 코드를 준비한다.
사건이 발생하면 준비한 코드를 자동으로 실행할 수 있다.
오라클의 트리거 개념과 유사하다.

이벤트 등록

onXXX 속성(프로퍼티)로 제공한다.

1. 정적 이벤트

HTML 태그에 적용한다.

    <form name="form1">
        <input type="text" name="txt1">
        <input type="button" value="button" name="btn2" onclick="m1()">
    </form>

    <script>
        function m1() {
            window.document.form1.txt1.value='홍길동';
        }
    </script>

btn2 클릭시, text box에 '홍길동' 삽입된다.

2. 동적 이벤트

자바스크립트에서 사용한다.

<body>
    <h1>Event</h1>

    <form name="form1">
        <input type="text" name="txt1">
        <input type="button" value="button" name="btn3">
    </form>

    <script>
        window.document.form1.btn3.onclick = m2;    //함수 포인터(함수의 위치 값을 넣는다)

        function m2() {
            window.document.form1.txt1.value='동적';
        }
    </script>
</body>

btn3 클릭시, text box에 '홍길동' 삽입된다.

🔻마우스 이벤트🔻

onmouseXXX 으로 제공한다.

1. onmouseover / onmouseenter

해당 객체 영역에서 마우스 커서가 진입하는 순간 발생한다.

2. onmouseout / onmouseleave

해당 객체 영역에서 마우스 커서가 빠져나가는 순간 발생한다.

3. onmousedown

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

4. onmouseup

해당 객체 영역에서 마우스 버튼을 떼는 순간 발생한다.

5. onmousemove

해당 객체 영역에서 마우스 커서 움직일 때 발생한다.

onmouseover / onmouseout 예시

<body>
    <script>
        <h1>마우스 관련 이벤트</h1>
        <form name="form1">
            <textarea name="txt1"></textarea>
        </form>
        
        var txt1 = window.document.form1.txt1;

        txt1.onmouseover = m1;
        txt1.onmouseout = m2;
        
        function message(txt){
            var now = new Date();
            txt1.value = now.toLocaleTimeString() + ':' + txt + '\r\n' + txt1.value;
        }
        function m1() {
            message('mouseover');
        }
        function m2() {
            message('mouseout');
        }
    </script>
</body>

textarea 영역에 마우스를 올리면 mouseover 가 작동되어 'mouseover'가 찍히고

영역 밖으로 벗어나면 mouserout이 작동되어 'mouserout'이 찍힌다.

event.buttons

어떤 마우스 버튼을 눌렀는지 숫자로 반환한다.
1(왼쪽) , 2(오른쪽), 3(가운데), 4(왼쪽+휠), 5(오른쪽+휠), 6(왼쪽+오른쪽+휠)
보통 오른쪽 버튼 사용을 방지하기 위해 사용한다.

마우스 커서 좌표

1. x, y

event.x / event.y
문서 좌측 상단을 기준으로 한다.
MS에서 만든 비표준으로 비권장한다.

2. clientX, clientY (*)**

event.clientX / event.clientY
문서 좌측 상단을 기준으로 한다.
x,y 방법보다 이 방법을 사용하도록 한다.
절대좌표

3. screenX, screenY

event.screenX / event.screenY
모니터 좌측 상단을 기준으로 한다.
웹페이지의 영역 밖의 영향으로 다루기가 어렵다.

4. offsetX, offsetY (*)**

event.offsetX / event.offsetY
이벤트 객체의 좌측 상단을 기준으로 한다.
상대좌표

offsetX, offsetY 사용 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        textarea {
            display: block;
            width: 500px;
            height: 300px;
            outline: none;
            resize: none;
            margin-bottom: 5px;
        }
    </style>
</head>
<body>

    <h1>마우스 관련 이벤트</h1>
    <form name="form1">
        <textarea name="txt1"></textarea>
        <input type="button" value="버튼" name="btn1">
    </form>

    <script>
        var txt1 = window.document.form1.txt1;
        
        function message(txt){
            var now = new Date();
            txt1.value = now.toLocaleTimeString() + ':' + txt + '\r\n' + txt1.value;
        }
        txt1.onmousedown = m3;
        txt1.onmouseup = m4;

        function m3() {
            if(event.buttons==2) {
                alert('오른쪽 버튼 클릭 금지!');
            }
            message('mounsedown');
        }

        function m4() {
            message(event.offsetX + ',' + event.offsetY);
        }
        
    </script>
</body>
</html>

textarea위에 클릭하면 이벤트 객체인 textarea위의 마우스 좌표를 반환한다.

onclick 은 마우스 이벤트가 아니기에 좌표와 관련된 작업은 지양한다. (키보드로 click를 조작할 수 있다.)

🔻키 관련 이벤트🔻

onkeyXXX 으로 제공한다.

1. onkeydown

키를 눌렀을 때 발생한다.
입력된 (물리)키는 구분 가능하지만, 문자는 구분이 불가능하다.
모든키에 반응한다.(ctrl, alt 등등)
물리키를 구분하는 용도로 사용한다.
직전의 누른 문자값을 반영할 수 없다.

2. onkeyup

키를 뗐을 떼 발생한다.
직전의 누른 문자가 필요한 업무에 활용한다.

3. onkeypress

키를 눌렀을 때 발생한다.
입력된 문자 구분 가능하다.
문자키에만 반응한다.(***)
한글은 인식하지 않는다.

*방향키 코드
37(좌), 38(상), 39(우), 40(하)

onkeydown / onkeyup / onkeypress 사용 예시

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input, textarea {
            display: block;
            margin-bottom: 10px;
            outline: none;
            /* width: 300px; */
        }

        input {padding: 5px;}
        textarea {height: 200px;}

    </style>
</head>
<body>
    <h1>키 이벤트</h1>

    <form name="form1">
        <input type="text" name="txt1">
        <input type="text" name="txt2">
        <textarea name="txt3"></textarea>
    </form>

    <script>
        var txt1 = window.document.form1.txt1;
        var txt2 = window.document.form1.txt2;
        var txt3 = window.document.form1.txt3;

        txt1.onkeydown = m1;
        txt1.onkeyup = m2;
        txt1.onkeypress = m3;

        function m1() {
            console.log('keydown');
        }

        function m2() {
            console.log('keyup');
        }

        function m3() {
            console.log('keypress');
        }

    </script>
</body>
</html>

숫자 123과 영어 abc는 onkeydown, onkeyup, onkeypress 모두 반응하지만

한글 ㄱㄴㄷ는 onkeydown, onkeyup만 반응한다.

주의❗

글자가 텍스트박스에 입력되는 시점을 알고있어야 한다.

1. 사용자가 텍스트박스에 키보드의 글자를 누른다.

2. keydown 이벤트가 발생한다.

3. 텍스트박스에 글자가 입력된다.

4. keyup 이벤트가 발생한다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        input, textarea {
            display: block;
            margin-bottom: 10px;
            outline: none;
            width: 300px;
        }

        input {padding: 5px;}
        textarea {height: 200px;}

    </style>
</head>
<body>
    <h1>키 이벤트</h1>

    <form name="form1">
        <input type="text" name="txt1">
        <input type="text" name="txt2">
    </form>

    <script>
        var txt1 = window.document.form1.txt1;
        var txt2 = window.document.form1.txt2;

        txt1.onkeydown = m1;
	txt1.onkeyup = m2;
        
        function m1() {
            // txt1 값이 한 박자 늦게 txt2의 값으로 대입됨
            // txt2.value = txt1.value;
        }
        
         function m2() {
            // txt1 값이 바로 txt2의 값으로 대입됨
            txt2.value = txt1.value;
        }
    </script>
</body>
</html>

따라서, onkeydown는 txt1값이 한 박자 늦게 txt2의 값으로 입력되고

onkeyup은 txt1의 값이 txt2의 값으로 바로 입력된다.

저작자표시 (새창열림)