JQuery on() one() off()

jquery사용위해 head태그안

<script src="https://code.jquery.com/jquery3.6.0.min.js"integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>

 작성해줘야한다

jQuery 3.x

• jQuery Core 3.6.0 -minified 사용하였다

https://releases.jquery.com/

jQuery CDN

 

 

 

제이쿼리 1.7이상은 bind가 on으로 변경됨

 

 

 

.on메소드

선택요소에 어떤타입 이벤트라도연결

하나의 이벤트핸들러에 여러개의 이벤트를 동시연결 객체로 사용가능

 

body안태그

   <button id="button">버튼입니다</button>

    <ul></ul>

  <h1>h1색이 변합니다</h1>

 

script안

  $("#button").on({
            click : function () {
                $("ul").append($("<li>li생성</li>"));
               // $("ul").append($("<li>").append("li생성"));
            },//,사용으로 여러이벤트 동시연결
            mouseenter : function () {
                $("h1").css("color","red");
            },
            mouseleave: function () {
                $("h1").css("color","black");
            }
        });

 

click은 누르면 누르면 ul안 append로 li태그를 생성해준다 

mouseenter 는 버튼입니다에 마우스를 갖다대면 h1색이 red로 변한다

mouseleave 는 버튼입니다에 마우스를 갖다대지않으면 h1색이 black으로 나온다

 

버튼누르면 li와 h1red로

버튼 마우스갖다대지 않았을떄

 

 

 

 

 

 

 

 

 

 

.one()메소드

연결된 이벤트핸들러가 한번만 실행되고 더 이상 실행되자 않는다

<!-- one메소드 -->
    <button id="one_button">한번만 실행되는 버튼입니다</button>

 

//one메소드를 사용하면 이벤트가 한번만 실행
        $("#one_button").one("click",function () {
            $(this).append("한번만 실행되는 이벤트입니다");
            
        });

 

원래 click에 appen를 사용하면 누를때마다 실행되는데 one메소드를 사용하면 한번만실행된다

버튼 누르기전

버튼누른후

 

 

 

 

 

 

 

 

 

 

.off()메소드

사용하지 않는 이벤트와의연결을 제거한다

 <button id="p_button">p태그가나옵니다</button>
    <button id="delete_event">off메소드</button>
    <p id="result"></p>

        $("#p_button").on("click",function () {
           $("#result").text("p태그 입니다")
        })
        $("#delete_event").on("click", function() {
           $("#p_button").off("click"); 
        });

 

원래 #p_button 에있는 이벤트만 사용하면 p태그가 나옵니다 버튼을 누르면 p태그입니다(#result)가나온다

밑의 o off메소드 버튼을 누르고 p태그가 나옵니다 버튼을 누르면 p태그입니다가 나오지않는다

&nbsp;p태그가 나옵니다 먼저클릭

off메소드클릭후 p태그가나옵니다 클릭