본문 바로가기
제이쿼리

[제이쿼리] 이벤트 메소드

2boki 2020. 5. 28. 09:18

1. 이벤트 등록 메소드 - on()

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

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

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

    <script>
        $(
            function() {
                // ********** on() 메소드 **********

                // 사용자가 btn1을 클릭하면
                // 그 다음 요소의 색상을 빨간색으로 변경
                $(".btn1").click(
                    function () {
                        $(".btn1").parent().next()
                        .css({ "color": "red" })
                    }
                );

                // 사용자가 btn2에 마우스를 올리면
                // 그 다음 요소의 색상을 초록색으로 변경
                // 사용자가 btn2에서 다른 요소로 마우스를 옮기면
                // 그 다음 요소의 색상을 검은색으로 변경
                $(".btn2").on(
                    {
                        "mouseover focus" : function()
                        {
                            $(".btn2").parent().next()
                            .css({ "color" : "green" })
                        },
                        
                        "mouseout blur" : function()
                        {
                            $(".btn2").parent().next()
                            .css({ "color" : "black" })
                        }
                    }
                );
            }
        );
    </script>
</head>

<body>
    <p>
        <button class="btn1">버튼 1</button>
    </p>
    <p>내용 1</p>
    <p>
        <button class="btn2">버튼 2</button>
    </p>
    <p>내용 2</p>
</body>

</html>

[버튼 1]을 클릭하면 '내용 1' 텍스트가 빨간색으로 변한다. [버튼 2]에 마우스를 올리면 '내용 2' 텍스트가 초록색으로 변한다. 마우스를 떼면 검은색으로 돌아온다.

 

2. 이벤트 등록 메소드 - trigger()

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

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

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

    <script>
        $(
            function() {
                // ********** trigger() 메소드 **********
                
                $(".btn1").click(
                    function () {
                        $(".btn1").parent().next()
                        .css({ "color": "red" })
                    }
                );

                $(".btn2").on(
                    {
                        "mouseover focus" : function()
                        {
                            $(".btn2").parent().next()
                            .css({ "color" : "green" })
                        }
                    }
                );

                // 버튼 1 클릭 이벤트 강제로 실행
                $(".btn1").click();

                // 버튼 2 mouseover 이벤트 강제로 실행
                $(".btn2").trigger("mouseover");
            }
        );
    </script>
</head>

<body>
    <p>
        <button class="btn1">버튼 1</button>
    </p>
    <p>내용 1</p>
    <p>
        <button class="btn2">버튼 2</button>
    </p>
    <p>내용 2</p>
</body>

</html>

버튼들과 상호작용 하지 않아도 이벤트가 실행된다.

 

3. 이벤트 제거 메소드 - off()

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

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

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

    <script>
        $(
            function() {
                // ********** off() 메소드 **********
                
                $(".btn1").click(
                    function () {
                        $(".btn1").parent().next()
                        .css({ "color": "red" })
                    }
                );

                $(".btn2").on(
                    {
                        "mouseover focus" : function()
                        {
                            $(".btn2").parent().next()
                            .css({ "color" : "green" })
                        }
                    }
                );

                // 버튼 1에 등록된 클릭 이벤트 제거
                $(".btn1").off("click");

                // 버튼 2에 등록된 마우스 오버, 포커스 이벤트 제거
                $(".btn2").off("mouseover focus");
            }
        );
    </script>
</head>

<body>
    <p>
        <button class="btn1">버튼 1</button>
    </p>
    <p>내용 1</p>
    <p>
        <button class="btn2">버튼 2</button>
    </p>
    <p>내용 2</p>
</body>

</html>

버튼을 클릭해도 이벤트가 실행되지 않는다.

 

4. 로딩 이벤트 메소드 - ready() / load()

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

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

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

    <script>
        $(
            function() {
                // ********** ready() / load() 메소드 **********
                // ready() : 사용자가 사이트를 방문할 때 요청한
                // html 문서 객체(document)의 로딩이 끝나면 이벤트 발생

                // load() : 외부에 연동된 소스(iframe, img, video)의
                // 로딩이 끝나면 이벤트 발생

                // html에 전체 요소가 로딩되면 실행
                $(document).ready(
                    function() {
                        var h1 = $(".img1").height();
                        console.log("ready : ", h1); // ready : 0
                    }
                );

                // 구버전 제이쿼리의 경우 load 함수를 아래와 같이 사용했음
                /*
                $(window).load(
                    function() {
                        var h2 = $(".img1").height();
                        console.log("load : ", h2); // load : 300
                    }
                );
                */

                // 외부 소스(이미지)가 완전히 로딩되면 실행
                // 이미지 높이(300) 출력
                $(window).on('load',
                    function() {
                        var h2 = $(".img1").height();
                        console.log("load : ", h2); // load : 300
                    }
                );
            }
        );
    </script>
</head>

<body>
    <p>
        <!-- 지정한 사이즈의 임시 이미지를 불러올 수 있는 사이트 -->
        <img src="http://place-hold.it/300x300" class="img1">
    </p>
</body>

</html>

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

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

[제이쿼리] 이벤트 객체 - scroll()  (0) 2020.05.28
[제이쿼리] 마우스 이벤트  (0) 2020.05.28
[제이쿼리] JSON  (0) 2020.05.26
[제이쿼리] 배열 관련 메소드  (0) 2020.05.26
[제이쿼리] 위치 탐색 선택자  (0) 2020.05.26

'제이쿼리' Related Articles

티스토리툴바