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
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
Example 2: Delete the click event of p
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.
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
How to remove followers on Xiaohongshu. How to remove followers without blocking them.
Mar 12, 2024 pm 04:40 PM
Everyone can get a lot of information on the Xiaohongshu APP. There are many functions and services here, all of which can be operated by users freely. According to their own needs, they can choose some corresponding functions and operations here to solve the problem. Some of your questions are particularly convenient. I can really recommend a large number of these notes to you every day. They are rich in content and cover a wide range. You can choose freely, no matter which content section you want to see here. We can satisfy everyone here and solve some of your problems. When you are free, you can try to post various notes by yourself. Maybe everyone will have the opportunity to gain a large number of fans, so you don’t want to lose some If fans pay attention, they can choose to remove this
BTCC tutorial: How to bind and use MetaMask wallet on BTCC exchange?
Apr 26, 2024 am 09:40 AM
MetaMask (also called Little Fox Wallet in Chinese) is a free and well-received encryption wallet software. Currently, BTCC supports binding to the MetaMask wallet. After binding, you can use the MetaMask wallet to quickly log in, store value, buy coins, etc., and you can also get 20 USDT trial bonus for the first time binding. In the BTCCMetaMask wallet tutorial, we will introduce in detail how to register and use MetaMask, and how to bind and use the Little Fox wallet in BTCC. What is MetaMask wallet? With over 30 million users, MetaMask Little Fox Wallet is one of the most popular cryptocurrency wallets today. It is free to use and can be installed on the network as an extension
How to bind a sub-account on Xiaohongshu? How does it check whether the account is normal?
Mar 21, 2024 pm 10:11 PM
In today's era of information explosion, the construction of personal brand and corporate image has become increasingly important. As the leading fashion life sharing platform in China, Xiaohongshu has attracted a large number of user attention and participation. For those users who want to expand their influence and improve the efficiency of content dissemination, binding sub-accounts has become an effective means. So, how does Xiaohongshu bind a sub-account? How to check whether the account is normal? This article will answer these questions for you in detail. 1. How to bind a sub-account on Xiaohongshu? 1. Log in to your main account: First, you need to log in to your Xiaohongshu main account. 2. Open the settings menu: click "Me" in the upper right corner, and then select "Settings". 3. Enter account management: In the settings menu, find the "Account Management" or "Account Assistant" option and click
Steps and methods to bind Douyin in Toutiao
Mar 22, 2024 pm 05:56 PM
1. Open Toutiao. 2. Click My in the lower right corner. 3. Click [System Settings]. 4. Click [Account and Privacy Settings]. 5. Click the button on the right side of [Douyin] to bind Douyin.
How to bind the Cainiao app to Pinduoduo? How to add the Cainiao Wrap to Pinduoduo platform?
Mar 19, 2024 pm 02:30 PM
The Cainiao app is a platform that can provide you with various logistics information. The functions here are very powerful and easy to use. If you have any logistics-related problems, they can be solved here. Anyway, it can bring you a The one-stop service can solve everything in time. Checking the express delivery, picking up the express delivery, sending the express delivery, etc. are all without any problems. We have cooperated with various platforms and all the information can be queried. However, sometimes It will happen that the goods purchased on Pinduoduo cannot display the logistics information. In fact, you need to manually bind Pinduoduo to achieve this. The specific methods have been sorted out below, and everyone can take a look. . How to bind Cainiao to Pinduoduo account: 1. Open Cainiao APP and go to the main page
How to use PUT request method in jQuery?
Feb 28, 2024 pm 03:12 PM
How to use PUT request method in jQuery? In jQuery, the method of sending a PUT request is similar to sending other types of requests, but you need to pay attention to some details and parameter settings. PUT requests are typically used to update resources, such as updating data in a database or updating files on the server. The following is a specific code example using the PUT request method in jQuery. First, make sure you include the jQuery library file, then you can send a PUT request via: $.ajax({u
How to bind the Cainiao APP to Pinduoduo How to bind the Cainiao APP to Pinduoduo
Mar 19, 2024 pm 05:16 PM
Do you know how to bind Pinduoduo when using Cainiao Wrap? The official version of Cainiao Wrap App does not automatically synchronize some Pinduoduo’s logistics information on this platform. All we need to do is You can copy the order number or check your mobile phone to see if there is any express delivery information. Of course, these all need to be completed manually. If you want to know more, come and take a look with the editor. How to bind the Cainiao APP to Pinduoduo 1. Open the Cainiao APP and click "Package Guide" in the upper left corner of the main page. 2. In the interface, there are many shopping websites, and accounts can be bound. 3. Click to import other e-commerce platforms. 4. User authorization: Click Pinduoduo to go to the interface
How to bind the Xiaomi car app to the charging pile device
Apr 01, 2024 pm 06:52 PM
The latest Mi su7 model car launched by Xiaomi has dominated various hot search lists. Many users who happen to want to buy a car have chosen Xiaomi su7 model car for purchase. So how do you use your Xiaomi car app to bind the car after picking up the car? If you decide to use a home charging pile for charging, this tutorial guide will give you a detailed introduction, I hope it can help you. First, we open the Xiaomi mobile app, click the My button in the lower right corner, and then in the My interface, you can see the option of home charging pile. After entering the page to bind the charging pile, click the scan code button below and scan the QR code on the charging pile. The QR code can be used to bind the charging pile to the app.
