Home > Article > Web Front-end > How to bind and unbind events in jquery? (detailed code explanation)
How to bind and unbind events in jquery? (detailed code explanation)
- WBOYforward
- 2021-12-15 18:34:252228browse
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!