In the previous article "18 JavaScript Optimization Tips You Need to Know", we introduced some tips in JavaScript. In this article, let's take a look at how to bind jquery events. I hope it will be helpful to everyone with the relevant knowledge about setting and unbinding.
jQuery event binding and unbinding
1.1. jQuery event registration
jQuery provides us with a convenient event registration mechanism, which makes developers depressed. The advantages and disadvantages of the operation are as follows:
Advantages: The operation is simple, and there is no need to worry about event coverage and other issues.
Disadvantages: Ordinary event registration cannot be used for event delegation, and event unbinding cannot be achieved, so other methods are required.
Syntax
Demo code
<body>
<div></div>
<script>
$(function() {
// 1. 单个事件注册
$("div").click(function() {
$(this).css("background", "purple");
});
$("div").mouseenter(function() {
$(this).css("background", "skyblue");
});
})
</script>
</body>1.2. jQuery event handling
Due to the shortcomings of ordinary registration event methods, jQuery has developed multiple processing methods. The key points are as follows:
on(): used for event binding, currently the most useful event. Binding method
off(): event unbinding
trigger() / triggerHandler(): event trigger
1.2.1 Event processing on() binding event
Due to the shortcomings of ordinary registration event methods, jQuery has created multiple new event binding methods bind () / live() / delegate() / on(), etc., the best of which is: on()
Syntax
Demo code
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<ol></ol>
<script>
$(function() {
// (1) on可以绑定1个或者多个事件处理程序
// $("div").on({
// mouseenter: function() {
// $(this).css("background", "skyblue");
// },
// click: function() {
// $(this).css("background", "purple");
// }
// });
$("div").on("mouseenter mouseleave", function() {
$(this).toggleClass("current");
});
// (2) on可以实现事件委托（委派）
// click 是绑定在ul 身上的，但是 触发的对象是 ul 里面的小li
// $("ul li").click();
$("ul").on("click", "li", function() {
alert(11);
});
// (3) on可以给未来动态创建的元素绑定事件
$("ol").on("click", "li", function() {
alert(11);
})
var li = $("<li>我是后来创建的</li>");
$("ol").append(li);
})
</script>
</body>1.2.3. Event processing off() unbinding event
When the logic above an event, in a specific When it is no longer needed according to requirements, the logic on the event can be removed. This process is called event unbinding. jQuery provides us with a variety of event unbinding methods: die() / undelegate() / off(), etc., and there is even an event binding method one() that only triggers once. Here we focus on off();
Syntax
Demo code
<body>
<div></div>
<ul>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
<li>我们都是好孩子</li>
</ul>
<p>我是一个P标签</p>
<script>
$(function() {
// 事件绑定
$("div").on({
click: function() {
console.log("我点击了");
},
mouseover: function() {
console.log('我鼠标经过了');
}
});
$("ul").on("click", "li", function() {
alert(11);
});
// 1. 事件解绑 off
// $("div").off(); // 这个是解除了div身上的所有事件
$("div").off("click"); // 这个是解除了div身上的点击事件
$("ul").off("click", "li");
// 2. one() 但是它只能触发事件一次
$("p").one("click", function() {
alert(11);
})
})
</script>
</body>1.2.4. Event processing trigger() automatically triggers events
Sometimes, under certain specific conditions, we hope that certain events can be automatically triggered, such as the automatic playback function of the carousel image being consistent with clicking the button on the right. You can use a timer to automatically trigger the click event on the right button without having to click the mouse. From this jQuery provides us with two automatic trigger events trigger() and triggerHandler();
Syntax
Demo code
<body>
<div></div>
<input type="text">
<script>
$(function() {
// 绑定事件
$("div").on("click", function() {
alert(11);
});
// 自动触发事件
// 1. 元素.事件()
// $("div").click();会触发元素的默认行为
// 2. 元素.trigger("事件")
// $("div").trigger("click");会触发元素的默认行为
$("input").trigger("focus");
// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").on("focus", function() {
$(this).val("你好吗");
});
// 一个会获取焦点，一个不会
$("div").triggerHandler("click");
// $("input").triggerHandler("focus");
});
</script>
</body>1.3. jQuery event object
jQuery encapsulates the event object event in the DOM, with better compatibility, easier acquisition, and little change in usage. When an event is triggered, an event object is generated.
Syntax
Demo code
<body>
<div></div>
<script>
$(function() {
$(document).on("click", function() {
console.log("点击了document");
})
$("div").on("click", function(event) {
// console.log(event);
console.log("点击了div");
event.stopPropagation();
})
})
</script>
</body>Note: The event object in jQuery can be used for reference from the event in API and DOM.
1.4. jQuery copy object
jQuery provides us with two sets of APIs to quickly obtain and set the size and position of elements, which are convenient and easy to use. The contents are as follows.
Syntax
Demo code
<script>
$(function() {
// 1.合并数据
var targetObj = {};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
// 2. 会覆盖 targetObj 里面原来的数据
var targetObj = {
id: 0
};
var obj = {
id: 1,
name: "andy"
};
// $.extend(target, obj);
$.extend(targetObj, obj);
console.log(targetObj);
})
</script>1.5. jQuery multi-library coexistence
Actual During development, many projects have been developed continuously for more than ten years, and jQuery versions are constantly updated. The initial jQuery version cannot meet the needs. At this time, it is necessary to ensure that new functions are implemented using the new jQuery version while the old version runs normally. This This situation is called the coexistence of multiple jQuery libraries.
Grammar
Demo code
<script>
$(function() {
// 让jquery 释放对$ 控制权 让用自己决定
var suibian = jQuery.noConflict();
console.log(suibian("span"));
})
</script>Related video tutorial recommendations: jQuery video tutorial
The above is the detailed content of How to bind and unbind events in jquery? (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!
Javascript Data Types : Is there any difference between Browser and NodeJs?May 14, 2025 am 12:15 AMJavaScript core data types are consistent in browsers and Node.js, but are handled differently from the extra types. 1) The global object is window in the browser and global in Node.js. 2) Node.js' unique Buffer object, used to process binary data. 3) There are also differences in performance and time processing, and the code needs to be adjusted according to the environment.
JavaScript Comments: A Guide to Using // and /* */May 13, 2025 pm 03:49 PMJavaScriptusestwotypesofcomments:single-line(//)andmulti-line(//).1)Use//forquicknotesorsingle-lineexplanations.2)Use//forlongerexplanationsorcommentingoutblocksofcode.Commentsshouldexplainthe'why',notthe'what',andbeplacedabovetherelevantcodeforclari
Python vs. JavaScript: A Comparative Analysis for DevelopersMay 09, 2025 am 12:22 AMThe main difference between Python and JavaScript is the type system and application scenarios. 1. Python uses dynamic types, suitable for scientific computing and data analysis. 2. JavaScript adopts weak types and is widely used in front-end and full-stack development. The two have their own advantages in asynchronous programming and performance optimization, and should be decided according to project requirements when choosing.
Python vs. JavaScript: Choosing the Right Tool for the JobMay 08, 2025 am 12:10 AMWhether to choose Python or JavaScript depends on the project type: 1) Choose Python for data science and automation tasks; 2) Choose JavaScript for front-end and full-stack development. Python is favored for its powerful library in data processing and automation, while JavaScript is indispensable for its advantages in web interaction and full-stack development.
Python and JavaScript: Understanding the Strengths of EachMay 06, 2025 am 12:15 AMPython and JavaScript each have their own advantages, and the choice depends on project needs and personal preferences. 1. Python is easy to learn, with concise syntax, suitable for data science and back-end development, but has a slow execution speed. 2. JavaScript is everywhere in front-end development and has strong asynchronous programming capabilities. Node.js makes it suitable for full-stack development, but the syntax may be complex and error-prone.
JavaScript's Core: Is It Built on C or C ?May 05, 2025 am 12:07 AMJavaScriptisnotbuiltonCorC ;it'saninterpretedlanguagethatrunsonenginesoftenwritteninC .1)JavaScriptwasdesignedasalightweight,interpretedlanguageforwebbrowsers.2)EnginesevolvedfromsimpleinterpreterstoJITcompilers,typicallyinC ,improvingperformance.
JavaScript Applications: From Front-End to Back-EndMay 04, 2025 am 12:12 AMJavaScript can be used for front-end and back-end development. The front-end enhances the user experience through DOM operations, and the back-end handles server tasks through Node.js. 1. Front-end example: Change the content of the web page text. 2. Backend example: Create a Node.js server.
Python vs. JavaScript: Which Language Should You Learn?May 03, 2025 am 12:10 AMChoosing Python or JavaScript should be based on career development, learning curve and ecosystem: 1) Career development: Python is suitable for data science and back-end development, while JavaScript is suitable for front-end and full-stack development. 2) Learning curve: Python syntax is concise and suitable for beginners; JavaScript syntax is flexible. 3) Ecosystem: Python has rich scientific computing libraries, and JavaScript has a powerful front-end framework.
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
PhpStorm Mac version
The latest (2018.2.1) professional PHP integrated development tool
Dreamweaver CS6
Visual web development tools
ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment
VSCode Windows 64-bit Download
A free and powerful IDE editor launched by Microsoft
WebStorm Mac version
Useful JavaScript development tools
