본문 바로가기
제이쿼리

[제이쿼리] 마우스 이벤트

2boki 2020. 5. 28. 09:40

1. click() / dblclick()

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function() {
                // ********** click() / dblclick() 메소드 **********
                // click() : 선택한 요소를 클릭했을 때 이벤트를 발생시키거나
                // 선택한 요소에 강제로 클릭 이벤트를 발생시킴

                // dblclick() : 선택한 요소를 두 번 클릭했을 때 이벤트를 발생시키거나
                // 선택한 요소에 강제로 더블클릭 이벤트를 발생시킴

                $(".btn1").on("click",
                    function(e) {
                        e.preventDefault();
                        $(".txt1").css({ "background-color" : "#ff0" });
                    }
                );

                $(".btn2").on("click",
                    function(e) {
                        $(".txt2").css({ "background-color" : "#0ff" });
                    }
                );

                $(".btn3").on("dblclick",
                    function() {
                        $(".txt3").css({ "background-color" : "#0f0" });
                    }
                );
            }
        );
    </script>
</head>

<body>
    <p>
        <!-- preventDeafult()에 의해 링크로 이동하지 않음 -->
        <a href="http://www.naver.com/" class="btn1">버튼 1</a>
    </p>
    <p class="txt1">내용 1</p>
    <p>
        <a href="http://www.naver.com/" class="btn2">버튼 2</a>
    </p>
    <p class="txt2">내용 2</p>
    <p>
        <button class="btn3">버튼 3</button>
    </p>
    <p class="txt3">내용 3</p>
</body>

</html>

[버튼 1]을 클릭하면 '내용 1' 텍스트의 배경이 노란색으로 변한다. [버튼 2]를 클릭하면 '내용 2' 텍스트의 배경이 파란색으로 변하고, 네이버로 페이지가 이동된다. [버튼 3]을 더블클릭하면 '내용 3' 텍스트의 배경이 초록색으로 변한다.

 

2. mouseenter() / mouseleave()

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function() {
                // ********** mouseenter() / mouseleave() 메소드 **********
                // mouseenter() : 대상 요소의 경계 범위에 마우스가 들어오면 이벤트를 발생시킴
                // mouseleave() : 대상 요소의 경계 범위에서 마우스가 완전히 벗어나면 이벤트를 발생시킴

                // mouseover()는 대상 요소에 '정확하게' 마우스 포인터가 올라가면 이벤트 발생
                // mouseenter()는 이벤트 대상이 '포함된 범위'에 마우스 포인터가 들어오면 이벤트 발생

                $("#box_1").on("mouseout",
                    function() {
                        $("#box_1").css({ "background-color" : "yellow" });
                    }
                );

                $("#box_2").on("mouseleave",
                    function() {
                        $("#box_2").css({ "background-color" : "pink" });
                    }
                );
            }
        );
    </script>
</head>

<body>
    <h1>mouseout</h1>
    <div id="box_1">
        <p><a href="#">내용 1</a></p>
        <p><a href="#">내용 2</a></p>
        <p><a href="#">내용 3</a></p>
    </div>

    <h1>mouseleave</h1>
    <div id="box_2">
        <p><a href="#">내용 4</a></p>
        <p><a href="#">내용 5</a></p>
        <p><a href="#">내용 6</a></p>
    </div>
</body>

</html>

'내용 1', '내용 2', '내용 3'이 담긴 <p> 태그에 각각 마우스를 올렸다가 벗어나면 배경의 색상이 노란색으로 변한다. '내용 4', '내용 5', '내용 6'이 담긴 <div> 태그에 마우스를 올렸다가 벗어나면 배경의 색상이 분홍색으로 변한다.

 

3. mousemove()

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <title>예제</title>

    <script src="js/jquery.min.js"></script>

    <script>
        $(
            function() {
                // ********** mousemove() 메소드 **********
                // 마우스 포인터의 좌푯값을 출력할 수 있음

                $(document).on("mousemove",
                    function(e) {
                        $(".posX").text(e.pageX);
                        $(".posY").text(e.pageY);
                    }
                );
            }
        );
    </script>
</head>

<body>
    <h1>mousemove</h1>
    <p>X : <span class="posX"></span>px</p>
    <p>Y : <span class="posY"></span>px</p>
</body>

</html>

마우스를 움직이면 좌표값이 계속해서 바뀐다.

저작자표시 비영리 변경금지 (새창열림)

'제이쿼리' 카테고리의 다른 글

[제이쿼리] 포커스 이벤트  (0) 2020.05.28
[제이쿼리] 이벤트 객체 - scroll()  (0) 2020.05.28
[제이쿼리] 이벤트 메소드  (0) 2020.05.28
[제이쿼리] JSON  (0) 2020.05.26
[제이쿼리] 배열 관련 메소드  (0) 2020.05.26

'제이쿼리' Related Articles

티스토리툴바