How to implement event removal in DOM in JQuery_jquery

The example in this article describes the method of event removal in DOM in JQuery. Share it with everyone for your reference. The details are as follows:

You can bind multiple events to the same element, or you can bind the same event to multiple elements. Assume there is a bb9345e55eb71822850ff156dfde57c8 element on the web page. Use the following code to bind multiple identical events to the element.

$(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． Remove previously registered events on button elements

First take a look at the code below. Click the "Delete All Events" button to delete the btn events above:

<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>

Let’s take a look at the syntax structure of the unbind() method: unbind([type] [, data]);

The first parameter is the event type, and the second parameter is the function to be removed. The details are as follows:

If there are no parameters, delete all bound events.
If an event type is provided as a parameter, only bound events of that type are removed.
If the handler function passed when binding is passed as the second parameter, only this specific event handler will be deleted.

2． Remove one of the events of the bb9345e55eb71822850ff156dfde57c8 element

First you need to specify a variable for these anonymous processing functions.

<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>

In addition, for situations where the binding only needs to be triggered once and then immediately unbound, JQuery provides a shorthand method - the one() method. The one() method can bind a handler function to an element. When the processing function is triggered once, it is deleted immediately. That is, on each object, the event handler function will only be executed once.

The structure of the one() method is similar to the bind() method, and its usage is the same as the bind() method. Its syntax structure is as follows: 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>

After using the one() method to bind a click event to the bb9345e55eb71822850ff156dfde57c8 element, the processing function will only be executed when the user clicks the button for the first time, and subsequent clicks will no longer work.

I hope this article will be helpful to everyone’s jQuery programming.