[제이쿼리]- 이벤트 제거 메서드 / 기본이벤트와 라이브이벤트 각각 제거

이벤트 제거 메서드를 사용하면 이전에 등록했던 이벤트를 제거할 수 있다. 

이때 이벤트를 어떤 종류로 등록했느냐에 따라서 문법과 메서드 이름이 달라진다. 

 

[종류]

 

1. off( )
: on( ) 매서드로 등록한 이벤트를 제거한다. 

1. 기본 이벤트 제거 방식
$('이벤트를 제거할 대상').off('제거할 이벤트명')

2. 라이브 이벤트 제거 방식
$(document 또는 '이벤트 대상의 상위요소').off('제거할 이벤트명', '이벤트 대상')

 

2. unbind( )

: bind( ) 로 등록한 이벤트를 제거한다. 

1. 기본 이벤트 제거 방식
$('이벤트를 제거할 대상').unbind('제거할 이벤트명')

 

3. undelegate( )

: delegate( )로 등록한 이벤트를 제거한다. 

1. 기본 이벤트 제거 방식
$('이벤트를 제거할 대상').undelegate('제거할 이벤트명')

2. 라이브 이벤트 제거 방식
$(document 또는 '이벤트 대상의 상위요소').undelegate('이벤트 대상', '제거할 이벤트 종류')

delegate( )는 주로 라이브 이벤트를 사용한다. 

---

예제) 동적인 요소도 만들어서 일반이벤트와 라이브이벤트를 등록해서 버튼 누르면 이벤트 지워보기

<div id="wrap">

      <p>

        <button class="btn1">버튼1</button>

      </p>

    </div>

    <p>

      <button class="del1">버튼1 이벤트 해제</button>

      <button class="del2">동적으로 생성한 버튼2 이벤트 해제</button>

    </p>

 

       //btn1에 기본이벤트 등록

        $(".btn1").on("mouseover", function () {

          alert("hello");

        });

        //btn2에 라이브이벤트 등록

        $(document).on("mouseover", ".btn2", function () {

          alert("welcome");

        });

        //btn2를 동적으로 생성하기

        let btn2 = $('<p><button class="btn2">버튼2</button></p>');

        //append로 #wrap의 자식요소 중 마지막 위치(막내)에 추가해줌

        $("#wrap").append(btn2);

 

 

그리고 나서 버튼 클릭하면 이벤트 지우기

 //del1에 클릭이벤트 등록해서 클릭하면 btn1의 일반 이벤트 지워지도록

        $(".del1").on("click", function () {

          $(".btn1").off("mouseover");

        });

        //del2에 클릭이벤트 등록해서 클릭하면 btn2의 라이브 이벤트가 지워지도록

        $(".del2").on("click", function () {

          $(document).off("mouseover", ".btn2");

        });