JQuery_jquery의 DOM에서 이벤트 제거를 구현하는 방법

이 기사의 예에서는 JQuery의 DOM에서 이벤트를 제거하는 방법을 설명합니다. 참고할 수 있도록 모든 사람과 공유하세요. 세부 내용은 다음과 같습니다.

여러 이벤트를 동일한 요소에 바인딩하거나 동일한 이벤트를 여러 요소에 바인딩할 수 있습니다. 웹페이지에 bb9345e55eb71822850ff156dfde57c8 요소가 있다고 가정합니다. 다음 코드를 사용하여 여러 개의 동일한 이벤트를 요소에 바인딩합니다.

$(function(){
 $('#btn').bind("click", function(){
     $('#test').append("<p>我的绑定函数1</p>");
   }).bind("click", function(){
     $('#test').append("<p>我的绑定函数2</p>");
   }).bind("click", function(){
     $('#test').append("<p>我的绑定函数3</p>");
  });
})

1． 버튼 요소에서 이전에 등록된 이벤트 제거

먼저 아래 코드를 살펴보고 위의 btn 이벤트를 삭제하려면 "모든 이벤트 삭제" 버튼을 클릭하세요.

<script type="text/javascript">
 $(function(){
  $('#btn').bind("click", function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
  $('#delAll').click(function(){
    $('#btn').unbind("click");
  });
 })
</script>

<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>

unbind() 메서드의 구문 구조를 살펴보겠습니다. unbind([type] [, data]);

첫 번째 매개변수는 이벤트 유형, 두 번째 매개변수는 제거할 함수입니다.

매개변수가 없으면 바인딩된 이벤트를 모두 삭제하세요.
이벤트 유형이 매개변수로 제공되면 해당 유형의 바인딩된 이벤트만 제거됩니다.
바인딩 시 전달된 핸들러 함수가 두 번째 매개변수로 전달되면 해당 특정 이벤트 핸들러만 삭제됩니다.

2． bb9345e55eb71822850ff156dfde57c8 요소의 이벤트 중 하나를 제거하세요

먼저 이러한 익명 처리 기능에 대한 변수를 지정해야 합니다.

<script type="text/javascript">
 $(function(){
  $('#btn').bind("click", myFun1 = function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", myFun2 = function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", myFun3 = function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
  $('#delTwo').click(function(){
    $('#btn').unbind("click",myFun2);
  });
 })
</script>

<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>

또한 바인딩이 한 번만 트리거된 후 즉시 바인딩 해제되어야 하는 상황을 위해 JQuery는 단축 메서드인 one() 메서드를 제공합니다. one() 메소드는 핸들러 함수를 요소에 바인딩할 수 있습니다. 처리 기능이 한 번 실행되면 즉시 삭제됩니다. 즉, 각 객체에서 이벤트 핸들러 함수는 한 번만 실행됩니다.

one() 메소드의 구조는 바인딩() 메소드와 유사하며, 사용법은 바인딩() 메소드와 동일합니다. 구문 구조는 one(type, [data], fn)입니다. ;

<script type="text/javascript">
 $(function(){
  $('#btn').one("click", function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).one("click", function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).one("click", function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
 })
</script>

<button id="btn">点击我</button>
<div id="test"></div>

one() 메서드를 사용하여 클릭 이벤트를 bb9345e55eb71822850ff156dfde57c8 요소에 바인딩한 후에는 사용자가 처음으로 버튼을 클릭할 때만 처리 기능이 실행되며 이후 클릭은 더 이상 작동하지 않습니다.

이 기사가 모든 사람의 jQuery 프로그래밍에 도움이 되기를 바랍니다.