[제이쿼리] - on 이벤트 제거 메서드 off

개발자도구 이벤트리스너 탭

콘솔창에서 이벤트리스너 창에서 등록한 이벤트를 확인할 수 있다. 

휴지통아이콘으로 임시로 지워볼 수 있다. 

 

---

이벤트 제거 메서드

 

이벤트를 제거하는 메서드로는 off()메서드가 있다. 

off 메서드를 사용하면 특정 이벤트를 제거할 수 있다. ( 단독이벤트도 off로 지울 수 있다)

ex) 팝업창 오늘 하루 보지 않기 버튼을 눌렀을 때 쓴다

 

[기본형]

$('이벤트 대상').off('제거할 이벤트 종류')

* 여러 개를 지우고 싶을 땐 이벤트 종류를 공백으로 구분해서 쓰면 된다.

 

on으로 등록한 메서드는 off로 지운다. 

---

기존 이벤트

 // 1. .btn1의 클릭 이벤트 등록

        $(".btn1").click(function () {

          $(".btn1").parent().next().css("background-color", "gold");

        });

        // .btn2에 마우스오버, 포커스 이벤트 등록

        $(".btn2").on({

          "mouseover focus": function () {

            $(".btn2").parent().next().text("바뀐 내용");

          },

        });

 

이벤트 제거

 // .btn1에 있는 클릭 이벤트 제거

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

 // .btn2에 있는 이벤트 제거 - 여러 개의 이벤트를 동시에 지울 땐 공백으로 구분

        $(".btn2").off("mouseover focus");