이벤트

1. 이벤트를 정의하는 방법

• $("셀렉터").이벤트이름(function(){
  ... 처리 내용...
  });

clickevent.html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <div id="click-div">클릭하세요</div>
    <hr>
    <input type="button" id="click-input" value="클릭하세요">
    <hr>
    <script>
        $("#click-div").click(function(){
            alert('div를 클릭했습니다.')
        });
        $("#click-input").click(function(){
            alert('click-input를 클릭했습니다.')
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <a href="https://www.naver.com" id="link1">link1</a>
    <hr>
    <a href="https://www.naver.com" id="link2">link2</a>
    <script>
        $('#link1').click(function(){
            alert("link1 클릭");
        });

        // 기본 동작 취소
        $('#link2').click(function(event){
            alert("link2 클릭");
            event.preventDefault();
        });

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

2. 마우스 이벤트

• MouseEnter + MouseLeave 이벤트
• 이를 위한 복합적인 hover 이벤트를 제공

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .event-box {
            border: 5px solid #007;
            background: #d5d5d5;
            color: #009;
            font-size: 32px;
            padding: 50px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="listener" class="event-box">
        Mouse Here
    </div>
    <script>
        // mouseenter
        $('#listener').mouseenter(function(){
            $('#listener').html('Mouse enter');
        });

        // mouseleave
        $('#listener').mouseleave(function(){
            $('#listener').html('Mouse leave');
        });

        // mousedown
        $('#listener').mousedown(function(){
            $('#listener').html('Mouse down');
        });
        
        // mouseup
        $('#listener').mouseup(function(){
            $('#listener').html('Mouse up');
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
        .event-box {
            border: 5px solid #007;
            background: #d5d5d5;
            color: #009;
            font-size: 32px;
            padding: 50px 0;
            text-align: center;
        }
    </style>
</head>
<body>
    <div id="listener" class="event-box">
        Mouse Here
    </div>
    <script>
        $('#listener').hover(
        function(){ // mouseenter
            $('#listener').html("마우스가 들어왔습니다.")
        }, function(){ // mouseleave
            $('#listener').html("마우스가 빠져나갔습니다.")
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <input id="click_me" type="button" value="click me">
    <input id="remove_event" type="button" value="unbind">
    <script>
        function clickHandelr() {
            alert("thank you");
        }
        $("#click_me").bind('click', clickHandelr);

        // unbind : 어떤 대상의 어떤 이벤트 핸들러를 제거할지 처리 가능
        $('#remove_event').bind('click', function(){
            $("#click_me").unbind('click', clickHandelr);
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <!-- bind(), click() 메세드를 사용해서 이벤트 작성해도
     내부적으로 on() 메서드를 이용해서 이벤트 핸들러와 바인딩 -->
    <h1>on \()</h1>
    <p>여기를 클릭해주세요</p>
    <script>
        $("p").on('click', function(){
            alert("문장이 클릭되었습니다.");
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <h1>on()</h1>
    <p>이 문장 위로 마우스를 움작여 보세요</p>
    <div></div>
    <script>
        $("p").on("mouseenter mouseleave", function(){
            $('div').append("마우스가 위로 들어왔거나 빠졌습니다.<br>");
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>
<body>
    <h1>on()</h1>
    <p>이 문장 위로 마우스를 움작여 보세요</p>
    <div></div>
    <script>
    $("p").on({click : function(){
        $("div").append("마우스가 문장을 클릭했습니다.<br>");
        },
       mouseenter : function(){
        $("div").append("마우스 커서가 문장 위로 들어왔습니다.<br>");
       },
       mouseleave : function(){
        $("div").append("마우스가 커서가 문장을 빼져나갔습니다..<br>");
       }
    });
    </script>
</body>
</html>

3. 키보드 이벤트

• keypress
  : 한글에 대해서 동작하지 않음
• keydown
  : 한글, 영문, 띄어쓰기 등에 대해서 모두 1회씩 이벤트가 발생(누르고 있는 동안 down 이벤트가 발생)