[Jquery] off() - 이벤트 제거하는 방법

    

off() 메소드

더 이상 사용하지 않는 이벤트와 연결을 제거합니다.

아래 예제를 통해 자세히 살펴보도록 하겠습니다.

<script>
    $(function() {
        $("#clickBtn").on("click", function() {
            $("#text").append("버튼을 클릭했어요<br>");
        });
        $("#removeBtn").on("click", function() {
            $("#text").off("click"); 	// id가 "clickBtn"인 요소의 클릭 이벤트와의 연결을 제거함
        })
    })
</script>

<h1>.off() 메소드</h1>
<button id="clickBtn">마우스를 클릭해 보세요!</button>
<button id="removeBtn">클릭 이벤트를 제거합니다!</button>
<p id="text"></p>

 

출력 결과

 

'clickBtn' 이라는 id를 가진 button을 클릭하면 '버튼을 클릭했어요'라는 메소드가 나옵니다.

(이때, 우리가 배운 off() 메소드를 통하여 클릭 이벤트를 제거할 수 있습니다.)

 

'removeBtn' 이라는 id를 가진 button을 클릭하면 'click' 이벤트 연결을 제거하는 예제였네요.