Home >Web Front-end >JS Tutorial >Detailed explanation of usage examples of jQuery binding event listener bind and removing event listener unbind_jquery

Detailed explanation of usage examples of jQuery binding event listener bind and removing event listener unbind_jquery

WBOYOriginal: 2016-05-16 15:19:132000browse

The examples in this article describe the usage of jQuery binding event listener bind and removing event listener unbind. Share it with everyone for your reference, the details are as follows:

Here respectively use bind(eventType,[data],Listener)//data as an optional parameter, the event bound by one() method is automatically deleted after being triggered once, unbind(eventType,Listener),

Example:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
 border:1px solid #000000;
}
input{
 border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 var fnMyFunc1; //函数变量
 $("img")
 .bind("click",fnMyFunc1 = function(){ //赋给函数变量
  $("#show").append("<div>点击事件1</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件2</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件3</div>");
 });
 $("input[type=button]").click(function(){
 $("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
 });
});
</script>
</head>
<body>
 <img src="11.jpg"> <input type="button" value="移除事件1">
 <div id="show"></div>
</body>
</html>

Look at this test code again:

<body>
<input type="button" name="aaa" value="点击我">
<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") will be executed three times. In event nested events, if you do not want to see such a situation, you need to disable the upper-level event. At this time, you can introduce the bind and unbind functions to solve the problem.

Introducing functions:

for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}

alert("aaa"); only executed once.

The bind() method adds one or more event handlers to the selected element and specifies the function to run when the event occurs
The unbind() method removes the event handler of the selected element. Ability to remove all or selected event handlers, or terminate the execution of a specified function when an event occurs.

event is the event type, the types include: blur, flcus, load, resize, scroll, unload, click, dblclikc, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select , submit, keydown, keypress, keyup, error, etc., of course it can also be a custom name.

data is an optional parameter, and the event.data attribute value is passed to the additional data object of the event object.
function is the processing function used for binding.

Grammar:

$(selector).bind(event,data,function)

Event and function must point to the following code snippets for explanation:

Example 1: Delete all events of p

Copy code The code is as follows:

$("p").unbind();

Example 2: Delete the click event of p

Copy code The code is as follows:

$("p").unbind("click");

Example 2: The test function triggered after deleting the click event of the p element and the test function triggered after adding the click event of the p element

$("p").unbind("click",test);
$("p").bind("click",test);

Note: To define .bind() you must specify what events and functions

Now let’s look at a simple demo. The entire div has a click to collapse and expand event. If you want to click on the link but not trigger the div’s click event, you need to disable the div’s click event when the link is triggered. Here I The link mouseenter event is used to unbind and delete the div event. This is not the end yet. At this time, as long as the mouse enters the link area, the click event of the div will be deleted. We also need to add the restoration of the div click event when the mouse moves out of the link area. The code is as follows:

$(function(){ var Func = function(){
  $(".com2").toggle(200); }
  $(".test").click(Func)
  $(".test a").mouseenter(function(){
    $(".test").unbind(); //删除.test的所有事件
  });
  $(".test a").mouseleave(function(){
    $(".test").bind("click",Func); //添加click事件
  });
});

event is the event type
…
function is the processing function used for binding.

Readers who are interested in more content related to jQuery events can check out the special topic on this site: "Summary of jQuery common event usage and techniques"

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

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery tips and tricks you can’t learn elsewhere (welcome to collect)_jqueryNext article：jQuery tips and tricks you can’t learn elsewhere (welcome to collect)_jquery

See more

Detailed explanation of usage examples of jQuery binding event listener bind and removing event listener unbind_jquery

Related articles