Home > Developer > JavaScript
JQuery binding event listening bind and removing event listening unbind usage example details, jqueryunbind
This article describes how to bind events to listen to bind and remove events to listen to unbind. We will share this with you for your reference. The details are as follows:
The post-bind (eventType, [data], Listener) // data is used as the optional parameter here. one () Events bound to this method are automatically deleted after one event is triggered. unbind (eventType, listener ),
Instance:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">Let's take a look at this test code:
<Body> <input type = "button" name = "aaa" value = "Click me"> <input type = "checkbox" name = "checkbox1"> </body>JQuery code:
$().ready(function(){for (var i = 0; i < 3; i++) {$("input[type='button']").click(function(){alert("aaaa");});}}Alert ("aaaa") is executed three times. If you do not want to see such a situation in the event nesting event, you need to disable the upper-layer event. In this case, bind and unbind functions can be introduced.
Introduced functions:
for (var i = 0; i < 3; i++) {$("input[type='button']").unbind("click");$("input[type='button']").bind("click", function(){alert("aaa");});}Alert ("aaa"); only once.
The bind () method adds one or more event handlers to the selected element and specifies the function that runs when an event occurs.
The unbind () method removes the event handler of the selected element. It can remove all or selected event handlers, or terminate the running of the specified function when an event occurs.Event is an event type, including: blur, flcus, load, resize, scroll, unload, click, dblclikc, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup and error, it can also be a custom name.
Data is an optional parameter. The attribute value of event. data is transmitted to an additional data object of the event object.
Function is the processing function used for binding.Syntax:
$ (Selector). bind (event, data, function)
The following code sections must be specified for the event and function:
Example 1: Delete All p events
Copy codeThe Code is as follows: $ ("p"). unbind ();
Example 2: delete the click event of p
Copy codeThe Code is as follows: $ ("p"). unbind ("click ");
Example 2: Delete the test function set out after the p element click Event and the test function triggered after the p element click event is added$("p").unbind("click",test);$("p").bind("click",test);Note: To define. bind (), you must specify the events and functions.
Now let's look at a simple demo. The entire div has a click collapse event. If you want to click a link but do not trigger the div click event, you need to disable the div click event when triggering the link. Here I use the linked mouseenter event as the unbind Delete div event. The cursor enters the link area, and the div click event is deleted. We also need to restore the div click event when we move the cursor out of The Link area. The Code is as follows:
$ (Function () {var Func = function () {$ (". com2 "). toggle (200);} $ (". test "). click (Func) $ (". test "). mouseenter (function () {$ (". test "). unbind (); // Delete. all test events}); $ (". test "). mouseleave (function () {$ (". test "). bind ("click", Func); // Add a click event });});Event is an event type.
...
Function is the processing function used for binding.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
