元素的点击事件。
要防止风暴冒泡，只需在风暴对应的响应函数中返回 false（return false;）即可。
消除风暴
在绑定风暴的过程中，不仅可以将多个风暴绑定到同一个元素，还可以将同一个风暴绑定到多个元素。 假设网页上有一个元素，使用下面的代码绑定多个相同的乱码。
$(function(){
$("#btn").on("click",function(){
$("#test").append("我绑定的函数1
");
}).on("click",function(){
$("#test").append("我绑定的函数2
");
}).on("click",function(){
$("#test").append("我绑定的函数3
");
});
});
点击按钮后，会出现下图所示的效果
手势动画
1. 删除按钮元素上注册后的风暴
首先在网页上添加一个去除风暴的按钮。
然后给按钮绑定一个storm，jQuery代码如下：
$("#delAll").click(function(){
$("#btn").off("click");
});我们看一下off()方法的句子结构：
off(events, [selector], [fn])events：一个或多个以空格分隔的事件类型和可选命名空间，或者只是命名空间，例如“click”、“keydown.myPlugin”或“.myPlugin”。
选择器：最初传递给 .on() 事件处理程序以附加的选择器。
fn：要附加的事件处理函数，或特殊值 false。
具体说明如下：
1）如果没有参数，则删除所有绑定的风暴。
2) 如果提供波类型作为参数，则仅删除该类型的束缚波。
3）如果绑定时传递的处理函数作为第2/3个参数，则只会删除该特定的风暴处理函数。
2.从元素中移除其中一个风暴
首先，需要为这个匿名处理函数指定一个变量，如下面的jQuery代码：
$(function(){
$("#btn").on("click",myFun1 = function(){
$("#test").append("我绑定的函数1
");
}).on("click", myFun2 = function(){
$("#test").append("我绑定的函数2
");
}).on("click", myFun3 = function(){
$("#test").append("我绑定的函数3
");
});
});然后就可以单独删除某个storm了，jQuery代码如下：
$("#delTow").unbind("click", myFun2);另外，对于只需要触发一次，然后立即解除绑定的情况，jQuery提供了一种缩写方法——one()方法，one()方法可以将处理函数绑定到元素上jquery设置input值，当处理函数为一旦触发立即删除。 它的句子结构和on()方法类似，使用方法也一样。
模拟操作
在上述情况下，用户必须点击按钮才能触发点击事件，但有时，需要模拟用户的操作来达到点击的效果。 例如，用户进入页面后，在用户不主动的情况下触发了点击事件。 点击。
在jQuery中，可以使用trigger()方法来完成模拟操作。 例如，可以使用下面的代码来触发id为btn的按钮的点击事件：
$("#btn").trigger("click");这样，当页面加载时，就会立即输出想要的疗效，也可以直接使用简化的写法click()来达到同样的疗效。
$("#delTow").click();trigger()方法不仅可以触发浏览器支持的同名事件，还可以触发自定义名称的事件。 此时传入的参数就是自定义事件的名称。
触发器（类型，[数据]）方法有两个参数。 第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据。 它以链表的形式传递，通常通过传递一个参数给回调函数来区分风暴是由代码还是用户触发的：
$("#btn").on("myClick", function(event,msg1,msg2){//获取数据
$("#test").append(""+msg1 + msg2 +"
");
});
$("#btn").trigger("myClick",["我的自定义","事件"]);//传递两个数据信号
在trigger()方法触发风暴后，浏览器的默认动作将会被执行。
$("input").trigger("focus");上面的代码不仅会触发元素绑定的焦点风暴jquery设置input值，还会使元素本身获得焦点（这是浏览器的默认操作）。
如果你只想触发绑定的焦点风暴，但不想执行浏览器的默认操作，你可以使用jQuery中另一个类似的方法——triggerHandler()方法。
$("input").triggerHandler("focus");该方法只会触发元素上绑定的特定storm，同时取消浏览器对这个storm的默认操作，即文本框只会触发绑定的focusstorm，而不会获得焦点。
如果您觉得对您有用，可以关注并转发。 您的关注是对我很大的支持！
关注转发后私信“jQuery基础资料”即可获取线下资料，包括完整的基础资料、chm文档、示例代码等参考资料。
上一节：jQuery 中的 Storms - 事件绑定、合成风暴
下一节：jQuery 基础知识回顾 - jQuery 中的动画
事实上jquery绑定事件的方法，很多操作都需要与风暴绑定。 毕竟某种效果需要一定的触发才能生效，所以现在先不说。
页面加载
这一点上面已经讨论过，不再重复：
$(document).ready(function(){
//此处是页面DOM加载完成的入口
}
);
// 当然一般会简写为
$(function(){
//此处是页面DOM加载完成的入口
})
活动登记
其实jQuery中的storm注册通常分为两种，一种是单个storm注册，另一种是通过绑定的方式注册多个storm。
单风暴注册
格式：
$(选择器).事件(function(){})
而且它的风暴和原来的风暴基本一样，比如它有：mouseover、mouserout、blur、focus、change、keydown、keyup、scoll等风暴。
看看风暴中间发生了什么：
常用的风暴有：
鼠标风暴事件名称描述
点击
鼠标点击触发风暴
数据库点击
双击键盘引发风暴
鼠标输入
当鼠标指针经过某个元素时，将发生 mouseenter 事件。 此风暴主要与 mouseleave 事件一起使用。
鼠标离开
mouseleave 事件在鼠标指针离开元素时发生。 此风暴主要与 mouseenter 事件一起使用。
徘徊
当鼠标位于匹配元素前面时，将触发指定的第一个函数。 当鼠标移出该元素时，将触发指定的第二个函数。
现在来演示一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
<style type="text/css">
div{
height: 200px;
width: 200px;
border: 1px solid black;
margin-top: 20px;
}
</style>
</head>
<body>
<div class="div1">click</div>
<div class="div2">dbclick</div>
<div class="div3">mouseenter mouseleave</div>
<div class="div4">hover</div>
<script>
$(function(){
$('.div1').click(function(){
$(this).css('background-color','red');
})
$('.div2').dblclick(function(){
$(this).css('background-color','green');
})
$('.div3').mouseenter(function(){
$(this).css('background-color','red');
})
$('.div3').mouseleave(function(){
$(this).css('background-color','green');
})
$('.div4').hover(function(){
$(this).css('background-color','red');
},function(){
$(this).css('background-color','green');
})
})
</script>
</body>
</html>
键盘风暴事件名称说明
按下键
键盘的键盘被按下，表示按下的行为，按下一个按钮会继续触发
按键
当用户按下按钮并形成字符时发生（即不管shift、alt、ctrl等按键jquery绑定事件的方法，也就是说用户按下一个可以在屏幕上输出字符的键盘按键）时触发。 按住键盘会一直触发。
按键
当用户释放按键时触发。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
<style type="text/css">
</style>
</head>
<body>
<input type="text" value="" />
<script>
$(function(){
var test=$('input');
test.keydown(function(){
console.log('keydown.....')
})
test.keypress(function(){
console.log(arguments)
console.log('keypress.....')
})
test.keyup(function(){
console.log('keyup.....')
})
})
</script>
</body>
</html>
形成风暴事件描述
提交
当表单被提交时，submit 事件发生。
改变
当元素的值发生更改时，将发生更改事件（仅适用于表单数组）。
重点
当元素获得焦点时（通过键盘单击选择元素或通过 Tab 键导航到元素时），将发生 focus 事件。
模糊
当元素失去焦点时，就会发生模糊事件。
文档/窗口风暴事件描述
调整大小
当浏览器窗口大小改变时，会发生resize事件
滚动
当用户滚动指定元素时，会发生滚动事件。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
<style type="text/css">
div{
width: 200px;
height:80px;
overflow: scroll;
border: 1px solid black;
}
</style>
</head>
<body>
<div> 仇恨不会随着时间的流逝而被稀释，而如同酿制的酒一样变得愈加醇厚，令人深入灵魂。</div>
<script>
$(function(){
$(window).resize(function(){
console.log('resize....')
})
$('div').scroll(function(){
console.log('scroll....')
})
})
</script>
</body>
</html>
关于绑定风暴
on() 方法向所选元素和子元素添加一个或多个风暴处理程序。
**从 jQuery 版本 1.7 开始，on() 方法是 bind()、live() 和 delegate() 方法的新替代品。 **这种方法给API带来了很多便利，我们推荐使用这种方法，它简化了jQuery代码库。
on() 方法可以将一个或多个风暴绑定到捕获的元素。
$(选择器).on.(events[,selector][,fn])
events：由空格和可选命名空间分隔的一种或多种事件类型，例如“click”或“keydown.myPlugin”。
选择器：一个选择器字符串，用于过滤触发风暴的选择器元素的后代。 如果 selected < null 或省略，则当事件到达所选元素时始终会触发该事件。
data：当风暴触发时，应将 event.data 传递给风暴处理函数。
fn：风暴触发时执行的函数。 false 值也可以用作返回 false 的函数的缩写。
演示第一种方式：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
<style type="text/css">
div{
width: 200px;
height:200px;
border: 1px solid black;
}
.cls{
background-color: red;
}
</style>
</head>
<body>
<div> </div>
<script>
$(function(){
$('div').on('mouseover mouseout',()=>{
$('div').toggleClass('cls')
})
})
</script>
</body>
</html>
可见，虽然可以绑定多种扰动，但只能触发一种方式。
on 的另一个优点——委托
on 可用于风暴分配操作。 事件赋值的定义就是将原本添加在子元素头部的storm绑定到父元素头部，也就是将storm赋值给父元素。如果不懂的话可以看另一个
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
<style type="text/css">
</style>
</head>
<body>
<ul id="u1">
<li>老头环</li>
<li>神秘臂力</li>
<li>你惹他干嘛</li>
</ul>
<ul id="u2">
<li>老头环</li>
<li>神秘臂力</li>
<li>你惹他干嘛</li>
</ul>
<ul id="u3">
<li>老头环</li>
<li>神秘臂力</li>
<li>你惹他干嘛</li>
</ul>
<script>
$(function() {
// 这个事件绑定在ul标签上，但是触发时li标签触发
$('#u1').on('click','li',function(event){
alert(event.currentTarget.textContent)
})
// 先来一个不按照上面的写来一个
$('#u2').on('click',function(event){
alert(event.currentTarget.textContent)
})
$('#u3').click(function(event){
alert(event.currentTarget.textContent)
})
})
</script>
</body>
</html>
对尚未创建的元素进行绑定风暴的另一个优点
它是一个动态创建的元素。 可以先将创建的元素绑定到storm旁边，这样就不会报错了。 表现如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
<style type="text/css">
</style>
</head>
<body>
<ul id="u1">
<li>老头环</li>
<li>神秘臂力</li>
<li>你惹他干嘛</li>
</ul>
<script>
$(function() {
// 可以把事件写在前面，而后面动态添加的也会添加这个事件
$('#u1').on('click','li',function(event){
alert(event.currentTarget.textContent)
})
var ele='白雪公主时尼哥 '
$('#u1').append(ele)
})
</script>
</body>
</html>
其他一些解开风暴的方法
off() 方法通常用于删除 on() 方法添加的风暴处理程序。
**从 jQuery 版本 1.7 开始，off() 方法是 unbind()、die() 和 undelegate() 方法的新替代品。 **这种方法给API带来了很多便利，我们推荐使用这种方法，它简化了jQuery代码库。
格式：
$(selector).off(event,selector,function(eventObj),map)
参数说明
事件
指定要从所选元素中删除的一个或多个属性或命名空间。 用空格分隔多个风暴值。 必须是有效的风暴。如果你不写，所有的烦恼都将被取消
选择器
选修的。 指定添加风暴处理程序时最初传递给 on() 方法的选择器。
函数（事件对象）
选修的。 指定风暴发生时要运行的功能。
地图
指定事件映射 ({event:function, event:function, …})，其中包含要添加到元素的一个或多个事件，以及事件发生时要运行的函数。
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
margin-top: 10px;
border: 1px solid black;
}
.mo {
background-color: red;
}
.ml {
background-color: blue;
}
</style>
</head>
<body>
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<script>
$(function () {
$('.d1').on(
{
mouseenter: function () {
$(this).removeClass('ml')
$(this).addClass('mo')
},
mouseleave: function () {
$(this).removeClass('mo')
$(this).addClass('ml')
}
}
)
$('.d2').on(
{
mouseenter: function () {
$(this).removeClass('ml')
$(this).addClass('mo')
console.log('d2---mouseenter')
},
mouseleave: function () {
$(this).removeClass('mo')
$(this).addClass('ml')
console.log('d2---mouseleave')
}
,
click: function () {
$(this).off()
}
}
)
$('.d3').on(
{
mouseenter: function () {
$(this).removeClass('ml')
$(this).addClass('mo')
console.log('d3---mouseenter')
},
mouseleave: function () {
$(this).removeClass('mo')
$(this).addClass('ml')
console.log('d3---mouseleave')
}
,
click: function () {
$(this).off('mouseenter')
}
}
)
})
// })
</script>
</body>
</html>
从上面的例子可以看出，如果off()中没有参数，则该元素的所有storm都将被解除绑定，如果使用storm名称作为参数（如果有多个，则留下一个中间的空格），指定的风暴将被取消。
如果 Storm 仅按顺序绑定 --one
one() 方法向所选元素添加一个或多个风暴处理程序，并指定风暴发生时要运行的函数。
使用 one() 方法时，每个元素只能运行一次 Storm 处理函数。
格式：
$(selector).one(event,data,function)
参数说明
事件
必需的。 指定要添加到元素的一场或多场风暴。 用空格分隔多个风暴值。 一定是一场有效的风暴。
数据
选修的。 指定传递给函数的附加数据。
功能
必需的。 指定风暴发生时要运行的功能。
演示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="jquery-3.6.0.min.js"></script>
<title>test</title>
<style type="text/css">
</style>
</head>
<body>
<button class="d1">测试</div>
<script>
$(function () {
$('.d1').one('click' ,function(){
alert('测试')
}
)
})
</script>
</body>
</html>
