티스토리 뷰

KH 정보교육원 [ Java ]

KH 74일차 - 제이쿼리 ( 이벤트 메소드 ) (***)

monimoni 2022. 6. 14. 18:22

 

[ 1. hover 메소드 ( onmouseover + onmouseout ) ] (**)

 

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

<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>제이쿼리 - a / form태그에 대한 기본 이벤트 차단</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            $(".btn1").on({
                "mouseover" : function(){ // 마우스 포인터가 위에 있을 때
                    $(".txt1").css({ backgroundColor : "yellow" });
                }, // mouse over

                "mouseout" : function () { // 포인터가 빠져 나왓을 때
                    $(".txt1").css({ background : "none" });
                } // mouse out
            });


            // onover이란 전역 이벤트 속성은 존재하지 않다.
            // hover를 구현하기 위해서는 2개의 이벤트가 결합되어야 한다. ( onmouseover + onmouseout )
            // hover 이벤트로 위의 2개의 이벤트를 한번에 처리할 수 있다.

            // (method) JQuery.hover(handlerIn: (eventObject: JQueryEventObject) => any, handlerOut: (eventObject: JQueryEventObject) => any): JQuery (+1 overload)

            $(".btn2").hover(function(){
                $(".txt2").css( {backgroundColor : "aqua" });
            }, function () {
                $(".txt2").css( { background : "none" } );
            }); // hover - 이벤트를 2개 설정

        }); //.jq
    </script>
    
</head>

<body>
    
    <p><button class="btn1">Mouse Over / Mouse Out</button></p>
    <p class="txt1">내용1</p>

    <p><button class="btn2">Hover</button></p>
    <p class="txt2">내용2</p>

</body>

</html>

[ 2. mouseout과 mouseleave 이벤트 메소드 ]

 

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

<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>제이쿼리 - mouseout과 mouseleave의 차이</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            console.clear();

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

            $("#box_2").on("mouseleave", function() {
                $("#box_2").css( { backgroundColor : "pink"} );
            });

            // mouseleave는 브라우저에서 사실상 mouseout으로 받아들인다.
            
        }); //.jq

    </script>
    
</head>

<body>
    
    <!-- onmouseover과 onmouseout을 hover에서 동시에 지정한다. -->

    <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>


    <!-- mouseenter과 mouseleave를 hover에서 동시에 지정한다. -->
    <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>

[ 3. mousemove 이벤트 메소드 ] (***)

 

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

<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>제이쿼리 - mousemove</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            console.clear();

            $(document).on("mousemove", function(e) {
                $(".posX").text(e.pageX);
                $(".posY").text(e.pageY);
            }); // mousemove : 마우스가 움직일 때 마다 x좌표와 y좌표를 나타내준다.

        }); //.jq

    </script>
    
</head>

<body>
    
    <h1>mousemove</h1>

    <p> X : <span class="posX">0</span>px</p>
    <p> Y : <span class="posY">0</span>px</p>

</body>

</html>

[ 4. onscroll ] (*)

 

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

<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>제이쿼리 - 스크롤바 위치값 얻기</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <style>

        body{
            height: 10000px;
            width: 5000px;
        }

        /* 스크롤바가 생기도록 바디 크기 조절 */

        #wrap{
            position: fixed;
            left: 10px;
            top: 10px;
        }

    </style>

    <script>

        $(function(){

            console.clear();

            $(document).on("scroll", function(){

                console.debug(`onscroll ...`);
                
                // 세로 스크롤 바의 위치 획득
                let sc_top = $(this).scrollTop();
                // 가로 스크롤 바의 위치 획득
                let sc_left = $(this).scrollLeft();

                $(".top").text(sc_top);
                $(".left").text(sc_left);

            }); // onscroll

        });

    </script>
    
</head>

<body>
    
    <div id="wrap">
        <p>scrollTop : <span class="top">0</span>px</p>
        <p>scrollLeft : <span class="left">0</span>px</p>
    </div>

</body>

</html>

[ 5. 제이쿼리 이벤트 - focusin / focusout ] (***)

 

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

<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>제이쿼리</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            console.clear();

            $("#user_id_1, #user_pw_1").on("focus", function(){
                $(this).css( { backgroundColor : "pink" });
            }); // onfocus

            $("#user_id_1, #user_pw_1").on("blur", function(){
                $(this).css( { backgroundColor : "white" });
            }); // onblur

            // ----------------------------------------------

            // focusin / focusout은 제이쿼리의 이벤트이다.
            // 위의 focus / blur 이벤트에 상응하는 이벤트를 설정

            $("#user_id_2, #user_pw_2").on("focusin", function() {
                $(this).css( { backgroundColor : "orange" });
            }); // onfocusin

            $("#user_id_2, #user_pw_2").on("focusout", function() {
                $(this).css( { backgroundColor : "white" });
            }); // onfocusout

            // ----------------------------------------------

            let id_2 = $("#user_id_2");
            console.dir(id_2[0]); // (***)

        }); //.jq

    </script>
    
</head>

<body>
    
    <h1>focus / blur</h1>

    <form action="#" id="frm_1">

        <p>
            <label for="user_id_1">ID</label>
            <input type="text" name="uer_id_1" id="user_id_1">
        </p>

        <p>
            <label for="user_pw_1">PW</label>
            <input type="password" name="user_pw_1" id="user_pw_1">
        </p>

        <p>
            <input type="submit" value="Submit">
        </p>

    </form>

    <h1>focusin / focusout</h1>
    
    <form action="#" id="frm_2">

        <p>
            <label for="user_id_2">ID</label>
            <input type="text" name="uer_id_2" id="user_id_2">
        </p>

        <p>
            <label for="user_pw_2">PW</label>
            <input type="password" name="user_pw_2" id="user_pw_2">
        </p>

        <p>
            <input type="submit" value="Submit">
        </p>

    </form>

</body>

</html>

[ 6. data( ) 메소드 ]

 

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

<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>제이쿼리 - 데이터 메소드</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>
    
    <script>

        $(function(){

            console.clear();

            // data메소드는 선택한 요소의 데이터를 가지고 와준다. ( object타입의 객체로 반환 )
            // + data메소드는 부가적인 기능으로 드러나지 않게 요소노드에 내부적인 값을 추가해준다.

            // 데이터를 삭제하기 위해서는 removeData()를 해야 한다. (참고 : w3school)

            // ----------------------------------------------

            $("#btn1").
            // (method) JQuery.data(obj: { [key: string]: any; }): JQuery
                data( { text : "javascript"}).
                on ({ 
                    "mouseover" : overFnc,
                    "mouseout" : outFnc
                    });
            
            // ----------------------------------------------

            $("#btn2").
                data( { text : "welcome!"}).
                on({
                    "mouseover focus" : overFnc,
                    "mouseout blur" : outFnc
                }); // 2개의 이벤트에 같은 이벤트함수를 적용하게 하였다.

            // ----------------------------------------------

            // ----------------------------------------------
            //  function 함수는 1급 객체이기에 먼저 실행된다는 것을 잊지 말자!!
            // ----------------------------------------------

            function overFnc(){
                $(".txt").text( $(this).data("text") );
            }// overFnc

            // ----------------------------------------------

            function outFnc(){
                $(".txt").text("");
            } // outFnc

            // ----------------------------------------------

        }); //.jq

    </script>
    
</head>

<body>

    <p><button id="btn1">버튼1</button></p>
    <p><button id="btn2">버튼2</button></p>

    <p class="txt"></p>

</body>

</html>

[ 7. onchange 이벤트 메소드 ] (**)

 

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

<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>제이쿼리 - onchange 메소드(***)</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            console.clear();

            $("#rel_site").on("change", function(){

                console.log(`onchange invoked...`);
                console.log(this);

                // 일반적인 태그의 컨텐츠를 가지고 올 때에는, text나 html 메소드를 사용하지만
                // 입력양식의 사용자가 입력한 값이나 선택한 값을 가져올 때에는 val() 메소드를 가지고 와야 한다. (***) 
                $(".txt").text( $(this).val() );

            }); // onchange

            // this = Event.target
            // onchange는 input에서는 적합하지 않는다. (***)

        }); // .jq

    </script>
    
</head>

<body>
    
    <select id="rel_site">
        
        <option value="">사이트 선택</option>
        <option value="https://www.google.co.kr/">구글</option>
        <option value="https://www.naver.com/">네이버</option>
        <option value="https://www.daum.net/">다음</option>
        
    </select>

    <p class="txt"></p>

</body>

</html>

[ 8. input 태그에서 입력값 가지고 오기 ] (***)

 

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

<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>제이쿼리 - input태그에서 입력값 가지고 오기</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            console.clear();

            // keydown은 키보드를 누를때 발생
            $(document).on("keydown", KeyEventFnc);

            function KeyEventFnc(e){

                let direct = "";

                // Event 객체의 필드로 사용자가 입력한 키코드값을 저장하고 있는
                // 필드가 바로 KeyCode이다.

                switch( e.keyCode ){ // 정확한 코드를 알기 위해서는 아스키코드 테이블을 봐야한다.

                    case 37 : direct = "LEFT";
                        break;
                    case 38 : direct = "TOP";
                        break;
                    case 39 : direct = "RIGHT" ;
                        break;
                    case 40 : direct = "BOTTOM";
                        break;

                } // switch

                // input 태그에서 사용자가 입력한 값을 획득 / 설정하는 방법 

                if(direct){
                    $("#user_id").val(direct);
                } // if

            } // KetEventFnc

        }); //.jq

    </script>
    
</head>

<body>
    
    <p><input type="text" name="user_id" id="user_id"></p>

</body>
 
</html>

[ 9. 키코드값( 아스키 코드 )을 문자로 변경 ]

 

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

<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>제이쿼리</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            console.clear();

            // 이벤트 타켓이 document이기에 뷰포트 어디에서든 눌러도 된다.
            $(document).on("keydown", keyevent);

            function keyevent (e) {

                let keyC = String.fromCharCode(e.keyCode);
                $("#user").val(keyC);

            } // keyevent

        }); // .jq

    </script>
    
</head>

<body>
    <p><input type="text" name="user" id="user"></p>
</body>

</html>

[ 10. 이벤트 무력화 응용 - e.preventDefault ] (****)

 

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

<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>제이쿼리 - 이벤트 무력화 응용</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            console.clear();

            // =========================================================

            $(".menu1 a").on("click", function(e){

                console.log(`onclick invoked.`);

                // 발생된 이벤트의 기본동작을 무력화 ( 막는다. ) (****)
                // 이 경우에는 a 태그의 기능을 막는다.
                e.preventDefault();

                $(".menu1 a").css({ backgroundColor : "white", color : "black" });
                $(this).css({ backgroundColor : "blue", color : "white" });

                // 현재 클릭한 a태그는 파란 바탕에 흰 글씨가 나타나지만,
                // 다른 a태그는 하얀색으로 표시된다. (**)

                // return false; // 이것도 무력화시키는 방법이다.

            }); // onclick

            // =========================================================

            $(".menu2 a").on("click", function(e){

                console.log(`onclick invoked.`);

                // 발생된 이벤트의 기본동작을 무력화 ( 막는다. ) (****)
                e.preventDefault();

                $(".menu2 a").css({ backgroundColor : "white"});

                var idx = $(".menu2 a").index(this); // 몇번째 인덱스인지 반환한다.

                // 인덱스 번호는 0번부터 시작한다.

                $(".menu2 a").eq(idx).css({ backgroundColor : "red"}); // eq를 통해 몇번째 a태그인지 지정하여 css 적용

                $(".idxNum").text(idx); // 인덱스 번호를 text로 표시

            }); // onclick

            // =========================================================

            $('p.idxNum').click(function(e){

                console.debug(`>>>> onclick on p.idxNum ...`);

                e.preventDefault();
                console.log(e.isDefaultPrevented()); // 막혔는지 확인

                $(this).css({color: "pink", fontSize : "200px", fontWeight : "bold"});

            }); // click

            // =========================================================

            $('form_1').on('submit', function(e){

                console.debug(`>>>> onsubmit on form_1 ...`);

                e.preventDefault();
                console.log(e.isDefaultPrevented()); // 막혔는지 확인

                if(true){
                    $(this).submit();
                } // if - 직접 양식을 제출하는 메소드

                // form 태그는 click으로 데이터를 서버에 전송하는 것이 아니기에
                // onclick이 아닌 onsubmit으로 해야 한다. (***)

            }); // onsubmit

        }); //.jq

    </script>
    
</head>

<body>
    
    <h2>$(this)</h2>

    <ul class="menu1">
        <li><a href="https://www.naver.com/">메뉴1</a></li>
        <li><a href="https://www.naver.com/">메뉴2</a></li>
        <li><a href="https://www.naver.com/">메뉴3</a></li>
        <!-- a태그의 링크는 href에 지정된 곳으로 Get방식으로 request를 보내게 되는 것이다. -->
    </ul>

    <h2>Index( )</h2>

    <ul class="menu2">
        <li><a href="https://www.w3schools.com/">메뉴4</a></li>
        <li><a href="https://www.w3schools.com/">메뉴5</a></li>
        <li><a href="https://www.w3schools.com/">메뉴6</a></li>
    </ul>

    <p class="idxNum"></p>

    <hr>

    <!-- form은 사용자의 데이터를 서버에 전송하는 방법을 의미한다. -->
    <!-- POST방식으로 데이터를 서버에 보낸다는 의미이다. -->
    <!-- POST방식은 아래에 전송 결과가 나타난다. ( 보안에 유리 ) -->
    <!-- action에 보낼 서버를 지정해야 한다. -->
    <form action="http://localhost:8080" method="post" id="form_1">

        Your name : <input type="text" name="yourName" id="yourName">
        <p></p>

        <input type="submit" value="전송">

    </form>

</body>

</html>

[ 11. 그룹 이벤트 메소드 - 후손에게 이벤트 물려주기 ] (***)

 

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

<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>제이쿼리 - 그룹이벤트 메소드</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-migrate/3.4.0/jquery-migrate.min.js"></script>

    <script>

        $(function(){

            console.clear();


            // ---------------------------------------------------------
            //  1. 발동이 안되는 방식
            // ---------------------------------------------------------

            // 2번과 같이 동적으로 생성되는 class 속성값에 대해서 이벤트 설정을 하기 위해서는
            // 이와 같이 작성하면 안된다.
            $(".btn1.on").on("mouseover focus", function(){
                alert("HELLO!");
            }); // onmouseover & ofocus

            // 첫번째 버튼에 class =on이라는 속성 등록 (**)
            $(".btn1").addClass("on");

            // ---------------------------------------------------------
            //  2. 발동이 되는 방식 (****)
            // ---------------------------------------------------------

            // 위임방식의 이벤트 핸들러 설정 (***)
            $(document).on("mouseover focus", ".btn2.on", function(){
                alert("WELCOME!");
            }); // onmouseover & ofocus : .btn2 요소노드의 class=on 속성일때 이벤트 핸들러 작동

            // 위와 같은 방법은 나중에 동적으로 생성되는 요소에 대해서 이벤트를 설정할 때 사용한다.

            // document의 이벤트인 mouseover focus가 .btn2.on에게 물려준다.

            $(".btn2").addClass("on");

        }); //.jq

    </script>
    
</head>

<body>

    <div id="wrap">
        <p><button class="btn1">버튼1</button></p>
        <p><button class="btn2">버튼2</button></p>
    </div>

</body>

</html>

 

728x90

'KH 정보교육원 [ Java ]' 카테고리의 다른 글

KH 76일차 - ajax( ) 메소드 (******)  (0) 2022.06.16
KH 75일차 - 제이쿼리 ( 이벤트 메소드 ) / AJAX (*****)  (0) 2022.06.15
KH 73일차 - 제이쿼리 ( 이벤트 메소드 ) (***)  (0) 2022.06.13
KH 72일차 - 제이쿼리 ( 객체 편집 메소드 ) (****)  (0) 2022.06.10
KH 71일차 - 제이쿼리 ( 메소드 / 조별과제 ) (****)  (0) 2022.06.09
댓글
«   2024/09   »
일 월 화 수 목 금 토
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30
최근에 올라온 글
Total
Today
Yesterday
공지사항