비전공자 개발일기

JQuery14 본문

JQuery

JQuery14

HiroDaegu 2021. 12. 14. 00:50
728x90
SMALL
<!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>JQuery Event</title>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>

<body>
    <h1>on()</h1>
    <button class="mouse">마우스를 버튼 위로 가져가거나 클릭</button>
    <p id="text"></p>
    <script>
        $(function() {
            $("button.mouse").on({
                mouseenter : function() {
                    $("#text").append("마우스가 버튼 위로 진입<br>");
                },
                click : function() {
                    $("#text").append("마우스가 버튼을 클릭<br>")
                },
                mouseleave : function() {
                    $("#text").append("마우스가 버튼 위에서 빠져나감<br>")
                }
            })
        })
    </script>

    <h1>JQuery event 연결방법</h1>
    <ol>
        <li>$("선택자").click(function(event) {실행하고자 하는 제이쿼리 코드})</li>
        <li>$("선택자").bind("click", function(event) {실행하고자 하는 제이쿼리 코드})</li>
        <li>$("선택자").on("click", function(event) {실행하고자 하는 제이쿼리 코드})</li>
        <li>$("body").on({click: function(event) {실행하고자 하는 제이쿼리 코드}}, "선택자")</li>
        <li>$("body").on("click", "선택자", function(event){실행하고자 하는 제이쿼리 코드})</li>
    </ol>

    <h3>이벤트 연결</h3>
    <button id="connect">Click the button</button>
    <p id="text2"></p>
    <script>
        $(function() {
            $("body").on({
                click: function() {
                    $("#text2").html("Clicked the button")
                }
            }, "#connect")
        })
    </script>

    <h1>one()</h1>
    <p>연결된 이벤트 핸들러가 한 번 실행되고 나서는, 더는 실행되지 않음<br>같은 이벤트에 대해 연결된 이벤트 핸들러가 한 번 실행된 후에는 다른 이벤트 핸들러를 실행하고 싶을 때도 사용 가능</p>
    <button id="one_btn">Click the Button</button>
    <p id="text3"></p>
    <script>
        $(function() {
            $("#one_btn").one("click", function() {
                $("#text3").append("천 번째 클릭<br>")
                $(this).click(function() {
                    $("#text3").append("이미 클릭한 버튼<br>")
                })
            })
        })
    </script>

    <h1>off()</h1>
    <p>더는 사용하지 않는 이벤트와의 연결을 제거</p>
    <button id="clickBtn">Click the Button</button>
    <button id="removeBtn">Remove the Event</button>
    <p id="text4"></p>
    <script>
        $(function () {
            $("#clickBtn").on("click", function() {
                $("#text4").append("clicked the button")
            })
            $("#removeBtn").on("click", function() {
                $("#clickBtn").off("click")
            })
        })
    </script>

    <h1>이벤트의 위임</h1>
    <h2>이벤트 핸들러의 직접 등록</h2>
    <button id="add_li">아이템 추가</button>
    <ul class="leg">
        <li><a href="https://www.google.com">GOOGLE</a></li>
        <li><a href="https://www.naver.com">NAVER</a></li>
        <li><a href="https://www.daum.net">DAUM</a></li>
    </ul>
    <p id="text5"></p>
    <script>
        $(function() {
            $("ul.leg a").on("click", function(event) {
                event.preventDefault()
                $("#text5").append("이 링크 동작 안함<br>")
            })
            $("#add_li").on("click", function() {
                $("ul.leg").append(`<li><a href="https://www.facebook.com">FACEBOOK</a></li>`)
                // 직접 등록된 이벤트 핸들러는 현재 존재하는 요소에만 연결되며, 새롭게 추가되는 요소에는 연결되지 않음
            })
        })
    </script>
    <h2>이벤트의 위임 예</h2>
    <p>이벤트의 위임을 이용하면 현재 존재하는 자손 요소뿐만 아니라, 나중에 추가되는 자손 요소까지도 모두 자동으로 연결됨</p>
    <button id="add_li2">아이템 추가</button>
    <ul class="deleg">
        <li><a href="https://www.google.com">GOOGLE</a></li>
        <li><a href="https://www.naver.com">NAVER</a></li>
        <li><a href="https://www.daum.net">DAUM</a></li>
    </ul>
    <p id="text6"></p>
    <script>
        $(function() {
            $("ul.deleg").on("click", "a", function(event) {
                event.preventDefault()
                $("#text6").append("이 링크 동작 안함<br>")
            })
            $("#add_li2").one("click", function() {
                $("ul.deleg").append(`<li><a href="https://www.yahoo.co.kr">YAHOO</a></li>`)
            })
        })
    </script>

    <h1>dblclick()</h1>
    <button id="click_btn">Click</button>
    <p>버튼을 <span id="clickText">클릭</span>하거나 <span id="dbclickText">더블클릭</span></p>
    <script>
        $(function() {
            $("#click_btn").click(function() {
                $("#clickText").css("color", "navy")
                $("#dbclickText").css("color", "yellow")
            })
            $("#click_btn").dblclick(function() {
                $("#dbclickText").css("color", "navy")
                $("#clickText").css("color", "yellow")
            })
        })
    </script>

    <h1>hover()</h1>
    <button id="hover_btn">Hover</button>
    <p id="text7"></p>
    <script>
        $(function() {
            $("#hover_btn").hover(function() {
                $("#text7").append("Mouse is on the Button or Mouse isn't on the Button<br>")
            })
        })
    </script>
</body>

</html>
728x90
LIST

'JQuery' 카테고리의 다른 글

JQuery16 - select option detail value 입력  (0) 2021.12.16
JQuery15  (0) 2021.12.15
JQuery13  (0) 2021.12.13
JQuery12  (0) 2021.12.12
JQuery11  (0) 2021.12.11
'JQuery' Related Articles more