jquery如何绑定事件,jq的绑定事件
在之前的文章《18个你需要知道的JavaScript优化技巧》中，我们介绍了JavaScript中的一些技巧。在本文中，我们来看看如何绑定和解除绑定jquery事件，希望对你有所帮助。
jQuery事件绑定和解绑
1.1. jQuery 事件注册
JQuery为我们提供了便捷的事件注册机制，但是开发者的凹陷操作的优缺点如下：
优点：操作简单，不用担心事件覆盖等问题。
缺点：普通事件注册不能做事件委托，不能实现事件解绑定，需要其他方法。
语法
演示代码
身体
分区/分区
脚本
$(function() {
//1.单一事件注册
$(div )。单击(函数(){
$(这个)。css(背景，紫色)；
});
$(div )。mouseenter(function() {
$(这个)。css(背景，天蓝色)；
});
})
/脚本
/body1.2. jQuery 事件处理
由于注册事件的通用方法的不足，jQuery开发了许多处理方法，主要解释如下：
On():用于事件绑定，目前最好的事件绑定方法。
Off():事件解除绑定
Trigger()/triggerHandler():事件触发
1.2.1 事件处理 on() 绑定事件
由于注册事件的常用方法的不足，jQuery创造了几种新的事件绑定方法，如bind()/live()/delegate()/on()，其中最好的是on()
语法
演示代码
身体
分区/分区
保险商实验所
我们都是好孩子
我们都是好孩子
我们都是好孩子
/ul
ol/ol
脚本
$(function() {
//(1) on可以绑定一个或多个事件处理程序。
//$(div )。打开({
//mouseenter: function() {
//$(这个)。css(背景，天蓝色)；
//},
//click: function() {
//$(这个)。css(背景，紫色)；
//}
//});
$(div )。on(mouseenter mouseleave ，function() {
$(这个)。toggle class( current )；
});
//(2) on可以实现事件委托(delegation)
//click绑定了ul，但是触发对象是ul里的小莉。
//$(ul li )。单击()；
$(ul )。on(click ， li ，function() {
警报(11)；
});
//(3) on可以将事件绑定到将来动态创建的元素。
$(ol )。on(click ， li ，function() {
警报(11)；
})
Var li=$(li我后来创造的/Li )；
$(ol )。追加(李)；
})
/脚本
/body1.2.3. 事件处理 off() 解绑事件
当在特定需求下不需要事件上的逻辑时，可以移除事件上的逻辑。这个过程称为事件解除绑定。JQuery为我们提供了多种事件解绑定方法：die()/undelegate()/off()等。甚至还有一个事件绑定方法one()，只触发一次。这里我们将重点介绍off()；
语法
演示代码
身体
分区/分区
保险商实验所
我们都是好孩子
我们都是好孩子
我们都是好孩子
/ul
p我是p标签/p
脚本
$(function() {
//事件绑定
$(div )。打开({
点击：function() {
Console.log(我点击了)；
},
mouseover: function() {
Console.log(我的鼠标通过)；
}
});
$(ul )。on(click ， li ，function() {
警报(11)；
});
//1.事件解除绑定
//$(div )。off()；//这是为了删除div上的所有事件
$(div )。关(点击)；//这是为了取消div上的click事件
$(ul )。关(点击，李)；
//2.one()但它只能触发事件一次。
$(p )。一个(点击，函数(){
警报(11)；
})
})
/脚本
/body1.2.4. 事件处理 trigger() 自动触发事件
有时，在某些条件下，我们希望某些事件自动触发。比如轮播地图的自动播放功能，和点击右键是一样的。您可以使用计时器在没有鼠标点击的情况下自动触发右键点击事件。因此jQuery为我们提供了两个自动触发事件，trigger()和trigger handler()；
语法
演示代码
身体
分区/分区
输入类型=文本
脚本
$(function() {
//绑定事件
$(div )。on(click ，function() {
警报(11)；
});
//自动触发事件
//1.元素。事件()
//$(div )。单击()；触发元素的默认行为。
//2.element.trigger(“事件”)
//$(div )。触发器(“点击”)；触发元素的默认行为。
$(输入)。触发器(“焦点”)；
//3.元素。triggerHandler (event )是不会触发元素的默认行为。
$(输入)。on(focus ，function() {
$(这个)。val(‘你好’)；
});
//一个会获得焦点，另一个不会
$(div )。trigger handler( click )；
//$(input )。trigger handler( focus )；
});
/脚本
/body1.3. jQuery 事件对象
JQuery将event对象Event封装在DOM中，兼容性更好，更容易访问，使用上改动很小。当事件被触发时，会生成一个事件对象。
语法
演示代码
身体
分区/分区
脚本
$(function() {
$(文档)。on(click ，function() {
Console.log(单击了文档)；
})
$(div )。开(点击，功能(事件){
//console.log(事件)；
Console.log (div被单击)；
event . stop propagation()；
})
})
/脚本
/body注意：使用了jQuery中的event对象，可以借鉴API和DOM中的event。
1.4. jQuery 拷贝对象
JQuery为我们提供了两套快速获取和设置元素大小和位置的API，方便易用。内容如下。
语法
演示代码
脚本
$(function() {
//1.合并数据
var target obj={ }；
var obj={
id: 1，
姓名：“安迪”
};
//$.扩展(target，obj)；
$.extend(targetObj，obj)；
console . log(target obj)；
//2.它将覆盖targetObj中的原始数据
var targetObj={
id: 0
};
var obj={
id: 1，
姓名：“安迪”
};
//$.扩展(target，obj)；
$.extend(targetObj，obj)；
console . log(target obj)；
})
/script1.5. jQuery 多库共存
实践中，很多项目已经持续开发了十几年，jQuery的版本也在不断更新，jQuery的原始版本已经不能满足要求。这时候就需要保证在旧版本正常运行的情况下，用新版本的jQuery实现新的功能。这种情况称为jQuery多数据库共存。
语法
演示代码
脚本
$(function() {
//让jquery释放对$的控制，让它自己决定
var sui bian=jquery . no conflict()；
console . log(suibian( span ))；
})
/脚本相关视频教程推荐：jquery视频教程以上是jQuery中如何绑定和解除绑定事件？更多详情请关注我们的其他相关文章！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。