In JQuery, the DOM implements the event removal method, and the jquerydom event is removed.

In JQuery, the DOM implements the event removal method, and the jquerydom event is removed.

This document describes how to remove a DOM Event in JQuery. Share it with you for your reference. The details are as follows:

You can bind multiple events to the same element, or bind the same event to multiple elements. Assume that there is a <button> element on the webpage. Use the following code to bind multiple identical events to the element.

$ (Function () {$ ('# btn '). bind ("click", function () {$ ('# test '). append ("<p> my binding function 1 </p> ");}). bind ("click", function () {$ ('# test '). append ("<p> my binding function 2 </p> ");}). bind ("click", function () {$ ('# test '). append ("<p> my binding function 3 </p> ");});})

1. Remove the previously registered event from the button Element

Let's take a look at the following code and click "delete all events" to delete the above btn events:

<Script type = "text/javascript"> $ (function () {$ ('# btn '). bind ("click", function () {$ ('# test '). append ("<p> my binding function 1 </p> ");}). bind ("click", function () {$ ('# test '). append ("<p> my binding function 2 </p> ");}). bind ("click", function () {$ ('# test '). append ("<p> my binding function 3 </p>") ;}); $ ('# delall '). click (function () {$ ('# btn '). unbind ("click") ;}) </script>

<Button id = "btn"> click me </button> <div id = "test"> </div> <button id = "delAll"> delete all events </button>

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

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

If no parameter exists, all bound events are deleted.
If the event type is provided as a parameter, only binding events of this type are deleted.
If the handler passed during binding is used as the 2nd parameter, only this specific event handler function will be deleted.

2. Remove an event from the <button> element.

First, you must specify a variable for these anonymous handler functions.

<Script type = "text/javascript"> $ (function () {$ ('# btn '). bind ("click", myFun1 = function () {$ ('# test '). append ("<p> my binding function 1 </p> ");}). bind ("click", myFun2 = function () {$ ('# test '). append ("<p> my binding function 2 </p> ");}). bind ("click", myFun3 = function () {$ ('# test '). append ("<p> my binding function 3 </p>") ;}); $ ('# deltwo '). click (function () {$ ('# btn '). unbind ("click", myFun2) ;};}) </script>

<Button id = "btn"> click me </button> <div id = "test"> </div> <button id = "delTwo"> Delete the second event </ button>

In addition, JQuery provides the one () method, which is short for triggering only once and then unbinding immediately. The one () method can bind a handler to an element. When the processing function is triggered once, it is deleted immediately. That is, the event processing function is executed only once on each object.

The structure of the one () method is similar to that of the bind () method. The usage is the same as that of the bind () method. The syntax structure is as follows: one (type, [data], fn );

<Script type = "text/javascript"> $ (function () {$ ('# btn '). one ("click", function () {$ ('# test '). append ("<p> my binding function 1 </p> ");}). one ("click", function () {$ ('# test '). append ("<p> my binding function 2 </p> ");}). one ("click", function () {$ ('# test '). append ("<p> my binding function 3 </p>") ;}) </script>

<Button id = "btn"> click me </button> <div id = "test"> </div>

After you bind an event to the <button> element using the one () method, the processing function is executed only when the user clicks the button 1st times. The subsequent clicking does not take effect.

I hope this article will help you with jQuery programming.