JQuery中绑定和解绑事件

在海底听雨

于 2024-05-18 18:58:15 发布

阅读量322

点赞数 8

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/sunset_bo/article/details/125043429

版权

1.绑定事件

语法：bind(type,[date],fn);

type:事件类型，主要包括click，mouseover，mouseout等基础事件，

此外还可以是自定义事件

date:可选函数

fn:处理函数

2.移除事件使用unbind()方法

语法：unbind([type],[fn])

type:事件类型，主要包括：布鲁日，focus，click，mouseout等基础事件

fn:处理函数

注意：当unbind()不带参数时，表示移除所绑定的全部事件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div>div</div>
<button>点击我解绑事件</button>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function() {
$('div').click(function() {
}).mouseenter(function() {
})
复合事件
hover()
//当多个事件的处理是同样的逻辑时，事件名中间使用 空格 分开
// $('div').bind('click mouseenter', function() {
// alert(1)
// })
//当多个事件有分开的逻辑处理时
$('div').bind({
click: function() {
alert(1)
},
mouseenter: function() {
alert(2)
}
})
$('button').click(function(){
//解绑指定的事件
// $('div').unbind('mouseenter')
//不给参数 则解绑指定元素上的所有事件
$('div').unbind()
})
})
</script>
</body>
</html>

3.复合事件

hover()

hover()方法相当于mouseover与mouseout事件的组合

语法：hover(enter,leave)

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
ul{
display: none;
}
</style>
</head>
<body>
<div>
toggle() 方法
<p>测试项</p>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function(){
//hover事件 是一个复合事件 就是相当于 mouseover和mouseout的结合体
$('div').hover(
//当鼠标进入时触发该方法
function(){
$('ul').show()
}
//当鼠标移出时 触发该方法
,function(){
$('ul').hide()
})
})
</script>
</body>
</html>

toggle()方法

toggle()方法用于模拟鼠标连续点击click事件

语法：toggle(fn1,fn2,...,fnN);

toggle()方法不带参数，与show()和hide()方法作用一样

语法：toggle();

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>toggle 模拟鼠标的多次点击</title>
</head>
<body>
<div>123</div>
<script src="../plugins/jQuery/jquery-1.8.3.min.js"></script>
<!-- <script src="../plugins/jQuery/jquery-3.6.0.js"></script> -->
toggle(fn1,fn2,....)此方法在jQuery1.9及以上被移除 不可再用
<script>
$(function(){
// 模拟鼠标多次点击的toggle 仅限于jQuery版本在1.9以下
$('div').toggle(function(){
$(this).css('background','red')
},
function(){
$(this).css('background','orange')
},
function(){
$(this).css('background','yellow')
},
function(){
$(this).css('background','green')
},
function(){
$(this).css('background','red')
},
function(){
$(this).css('background','blue')
},
function(){
$(this).css('background','purple')
},
function(){
$(this).css('background','black')
}
)
})
</script>
</body>
</html>

toggleClass()可对样式进行切换

语法：toggleClass(className);

toggle()和toggleClass()总结

toggle(fn1,fn2...)实现单击事件的切换，无需额外绑定click事件

toggle()实现事件触发对象在显示和隐藏状态之间切换

toggleClass()实现事件触发对象在加载某个样式和移除某个样式之间切换

注意：toggle(fn1,fn2...)此方法在JQuery1.9及以上被移除不可再用

在海底听雨

关注

8
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JQuery中绑定和解绑事件

绑定事件语法：bind(type,[date],fn);type:事件类型，主要包括click，mouseover，mouseout等基础事件，此外还可以是自定义事件date:可选函数fn:处理函数移除事件使用unbind()方法语法：unbind([type],[fn])type:事件类型，主要包括：布鲁日，focus，click，mouseout等基础事件fn:处理函数注意：当unbind()不带参数时，表示移除所绑定的全部事件<!DOCTYPE ht
复制链接

扫一扫