본문 바로가기
CS Study/Javascript

6. 이벤트 객체 (1) - 마우스 핸들링

Ryannn 2022. 4. 8. 13:25

1. 마우스 올리면 경고문 출력 - onmouseover()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <p id = "p">이곳에 마우스를 올려 보세요</p>
    <button onclick = "f(event)">클릭하세요</button>
    <script>
        function f(e){
            alert(e.type);
        }
        let a = document.getElementById("p");
        a.onmouseover = f;
    </script>

</body>
</html>

2. 이벤트 객체 프로퍼티 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h3>이벤트 객체의 프로퍼티 출력</h3>
    <hr>
    <p>버튼을 클릭하면 이벤트 객체를 출력합니다.</p>
    <button id = "button" onclick = "print(event)">클릭하세요</button>
    <script>
        function print(but){
            document.write("type : " + but.type + "<br>");
            document.write("target : " + but.target + "<br>");
            document.write("currentTarget : " + but.currentTarget + "<br>");
            document.write("defaultPrevented : " + but.defaultPrevented + "<br>");
        }
    </script>
</body>
</html>

3. 링크 이동 - preventDefault() 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function query(){
            let ret = confirm("네이버로 이동하시겠습니까?");
            return ret;
        }
        function noAction(e){
            e.preventDefault();
        }
    </script>
    <h3>이벤트의 디폴트 행동 취소</h3>
    <hr>
    <a href = "http://www.naver.com" onclick ="return query()">네이버로 이동할 지 물어보는 링크</a>
    <hr>
    <input type = "checkbox">빵(체크 됨);<br>
    <input type = "checkbox" onclick ="noAction(event)">술(체크 안됨);<br>
</body>
</html>

4. 계산기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        function calculator(){
            let sent = document.getElementById("sentence");
            let val = document.getElementById("answer");
            val.value = eval(sent.value);
        }
    </script>
   
</head>
<body>
    <h1>onclick, 계산기 만들기</h1>
    <hr>
    <p>계산하고자 하는 수식을 입력하고 계산 버튼을 눌러봐요.</p>
    식<input type = "text" value="" id = "sentence"><br>
    값<input type = "text" value = "" id = "answer"><input type = "button" value = "계산" onclick = "calculator()">
</body>
</html>

5. CSS 속성 동적 변경 - 마우스 관련 이벤트 리스너 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        span{
            display : inline-block;
        }
    </style>
    <script>
        let width =1;
        function changeColor(obj){
            obj.style.borderColor = "violet";
        }
        function changeFont(obj){
            obj.style.fontStyle = "italic";
        }
        function changeBorderColor(obj){
            obj.style.background.Color = "lightgray";
        }
        function changeBorder(e,obj){
            if(e.wheelDelta > 0){
                width ++;
            }
            else{
                width--;
                if(width < 0){
                    width ==0;
                }
            }
            obj.style.borderStyle = "ridge";
            obj.style.borderWidth = width + "px";
        }
    </script>
</head>
<body>
    <h3>마우스 관련 이벤트 리스너</h3>
    <hr>
    <div>마우스 관련 <span id = "p" onmouseover = "changeColor(this)" onwheel = "changeBorder(event,this)"
        onmousedown = "changeFont(this)" onmouseout = "changeBorderColor(this)">이벤트</span>가 발생합니다.</div>
    
</body>
</html>

6. 마우스 좌표 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>마우스 이벤트 객체의 프로퍼티와 onmousemove</h1>
    <hr>
    <p>이미지 위에 마우스를 움직일 때 onmousemove리스너가 실행되고, 마우스의 위치를 보여줍니다.</p>
    <img src = "beach.png" width = "300" height = "200" onmousemove = "where(event)">
    <div id = "div"></div>
    <script>
        let div = document.getElementById("div");
        let text = "";
        function where(e){
            text = "버튼 = " + e.button + "<br>";
            text += "(clientX, clientY) = " + e.clientX + "," +e.clientY+ "<br>";
            text += "(offsetX, offsetY) = " + e.offsetX + "," +e.offsetY+ "<br>";
            text += "(X, Y) = " + e.x + "," +e.y+ "<br>";
            div.innerHTML = text;
        }

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

7. 컨텍스트 메뉴 출력 금지 - oncontextmenu()활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body oncontextmenu = "return hidemenu()">
    <h1>oncontextmenu에서 컨텍스트 메뉴 금지</h1>
    <hr>
    <p>마우스 오른쪽 클릭은 금지됩니다. 아무곳이나 클릭해도 컨텍스트 메뉴를 볼 수 없습니다.</p>
    <img src ="beach2.png">
    <script>
        function hidemenu(){
            alert("오른쪽 클릭<컨텍스트 메뉴>금지");
            return false;
        }
    </script>
</body>
</html>

8. 이미지 확대/축소 - wheelDelta 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    
</style>
<body>
    <h1>마우스 휠을 이용한 이미지 확대/축소</h1>
    <hr>
    <p>이미지 위에 휠을 위로 굴리면 이미지가 축소되고 아래로 굴리면 이미지가
        확대됩니다.
    </p>
    <img onwheel = "changeSize(event)" id = "tulip" src = "Tulips.png">
    <script>
        let image = document.getElementById("tulip");
        image.width = 300;
        image.height = 300;
        function changeSize(e){
            if(e.wheelDelta>0){
                image.width *= 0.95;
                image.height *= 0.95;
            }
            else if(e.wheelDelta < 0){
                image.width *= 1.05;
                image.height *= 1.05;
            }
        }
        
     
    </script>

</body>
</html>

9. 마우스를 따라 다니는 이미지

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display : inline-block;
            position : absolute;
        }
    </style>
</head>
<body>
    <h1>이미지 커서 만들기</h1>
    <hr>
    마우스를 움직이면 이미지로 만든 커서가 마우르를 따라 다닙니다.
    <div id = "image1"><img id = "image" src = "apple.png" width = "30px" height = "30px"></div>
    <script>
        let image = document.getElementById("image1");
        document.addEventListener("mousemove", (event) =>{
            image.style.top = event.clientY + "px";
            image.style.left = event.clientX + "px";
        })
        
        
    </script>
</body>
</html>

10. 아이템에 마우스 올리면 설명 출력

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            display : inline-block;
            position : absolute;
            visibility: hidden;
            background-color : lightblue;
            border : 1px solid greenyellow;
        }
        li{
            width : 190px;
        }
    </style>
</head>
<body>
    <h1>아이템에 마우스를 올리면 설명 출력</h1>
    <hr>
    여름 방학 때 하고 싶은 것들
    <ul>
        <li id = "n1" onmouseover = "show(this,event)" onmouseout = "hide(event)">자전거로 대한민국 일주</li>
        <li id = "n2" onmouseover = "show(this,event)" onmouseout = "hide(event)">책 100권 읽기</li>
        <li id = "n3"onmouseover = "show(this,event)" onmouseout = "hide(event)">철인 3종 경기 준비</li>
        <li id = "n4" onmouseover = "show(this,event)" onmouseout = "hide(event)">자바스크립트 정리</li>
    </ul>
    <div></div>
    <script>
        let explain = document.getElementsByTagName("div");
        let n1 = document.getElementById("n1");
        let n2 = document.getElementById("n2");
        let n3 = document.getElementById("n3");
        let n4 = document.getElementById("n4");
        function show(obj,e){
            if(obj == n1){
                explain[0].innerHTML = "n1";
            }
            else if(obj == n2){
                explain[0].innerHTML = "n2";
            }
            else if(obj == n3){
                explain[0].innerHTML = "n3";
            }
            else{
                explain[0].innerHTML = "n4";
            }
            explain[0].style.visibility = "visible";
            explain[0].style.left = e.clientX + "px";
            explain[0].style.top = e.clientY + "px";
        }
        function hide(e){
            explain[0].style.visibility = "hidden";
        }
    </script>
</body>
</html>

11. 계산기 만들기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            display : inline-block;
            width : 70px;
            height : 20px;
            margin-left : 10px;
        }
    </style>
</head>
<body>
    <h1>계산기 만들기</h1>
    <hr>
    <input id = "expression" type = "text" value="0"><br><br>
    <button id = "back" value = "back">BACK</button><button class = "erase" value = "CE">CE</button><button class = "erase" value = "C">C</button><button id = "equal" value = "=">=</button><br>
    <button class = "number" value = "7">7</button><button class = "number" value = "8">8</button><button class = "number" value = "9">9</button><button class = "operator" value = "/">/</button><br>
    <button class = "number" value = "4">4</button><button class = "number" value = "5">5</button><button class = "number" value = "6">6</button><button class = "operator" value = "*">*</button><br>
    <button class = "number" value = "1">1</button><button class = "number" value = "2">2</button><button class = "number" value = "3">3</button><button class = "operator" value = "-">-</button><br>
    <button class = "number" value = "0">0</button><button class = "operator" value = "+">+</button><button id = "none" value = "NONE">NONE</button><button id = "none" value = "NONE">NONE</button><br>
    <script>
        let numbers = document.getElementsByClassName("number");
        let express = document.getElementById("expression");
        let operators = document.getElementsByClassName("operator");
        let equals = document.getElementById("equal");
        let back = document.getElementById("back");
        let erasers = document.getElementsByClassName("erase");
        for(let i =0;i<numbers.length;i++){
            numbers[i].onclick = function (){
                if(express.value == "0"){
                    express.value = "";
                }
                express.value += numbers[i].value;
            }
        }
        for(let i =0;i<operators.length;i++){
            operators[i].onclick = function (){
                express.value += operators[i].value;
            }
        }
        equals.onclick = function (){
            express.value = eval(express.value);
        }
        back.onclick = function(){
            express.value  = express.value.substr(0,(express.value.length-1));
        }
        for(let i =0;i<erasers.length;i++){
            erasers[i].onclick = function(){
                express.value = "";
            }
        }
    </script>
</body>
</html>
저작자표시

'CS Study > Javascript' 카테고리의 다른 글

8. Window 객체  (0) 2022.04.08
7. 이벤트 객체(2) - 문서, 이미지 로딩 / 폼 이벤트  (0) 2022.04.08
5. DOM / document 객체  (0) 2022.04.08
4. 배열과 객체  (0) 2022.04.08
3. 함수  (0) 2022.04.08

'CS Study/Javascript' Related Articles

티스토리툴바