在jquery中，绑定事件的意思是将普通的时间event绑定在DOM节点上，当DOM节点被选中时，将事件与之绑定，方便用户提供相应的操作；jquery中有bind、live、delegate和on四种方法来绑定事件，其中live方法已经被移除，建议使用on来绑定事件。
本教程操作环境：windows10系统、jquery3.6.0版本、Dell G3电脑。
jquery 绑定事件是什么意思
事件绑定：将普通的事件event绑定在DOM节点上，当DOM节点被选中时，将事件与之绑定，方便用户提供相应的操作。
比如：在button按钮上绑定click鼠标事件，在input中绑定focusin焦点事件等等，具体的例如：常常在代码中这样写$('.bn1').click(function(){...})就是普通的事件绑定。
扩展：
事件委托：是指在事件绑定的基础上补充与扩展事件绑定，具体就是指：通过子节点元素绑定事件来传递给父元素DOM节点（祖先节点）来统一管理其全部后代子元素。
这样遇到需要绑定很多事件的子元素时，就避免了很多麻烦重复绑定事件的工作，提供了访问效率。具体代码$('.div').on('click','.bn2',function(){...})
jquery有四种绑定事件的方式。bind,live,delegate,on。其中live已被移除，bind和delegate底层都是on实现的。
jquery建议我们使用on来绑定事件。除原生事件外，jquery支持绑定自定义事件。
最常用方法
$(“选择器”).事件名称(匿名函数)
举例1：
//这里的button为元素选择器，click为鼠标点击事件$("button").click(function(){
//函数内容
})举例2：
//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").mouseenter(function(){
//函数内容
})举例3：
//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").mouseleave(function(){
//函数内容
})bind函数
$(“选择器”).bind({“事件名称”:匿名函数})
举例1：
//button为元素选择器，bind的中文意思为‘绑定’$("button").bind({"click":function(){
//函数内容
}})举例2：
//这里的#btn1为id选择器即id名为btn1的元素，mouseenter为鼠标聚焦事件$("#btn1").bind({"mouseenter":function(){
//函数内容
}})举例3：
//这里的.ps为类选择器即class名为ps的所有元素，mouseleave为鼠标离焦事件$(".ps").bind({"mouseleave":function(){
//函数内容
}})
注：这里的bind函数参数为一个大括号包裹的字典，key值为双引号下的事件名称，value值为函数内容，一定一定一定要注意格式。
on函数
两个形参
$(“选择器”).on(“事件名称”,匿名函数)
举例：
$("button").on("click",function(){
//函数内容
})
注：含有两个形参的on函数，和bind函数使用方法类似，只是格式不同，可以一起记忆。
三个形参
含有三个参数，非常适合含有多个孩子的父节点使用，可以统一控制孩子节点事件
$(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数)
举例:
$("ul").on("click","li",function(){
$(this).css("color","blue"); //this表明当前点中的对象，此语句表明，当点击li标签时候，将该li标签颜色变为blue
})
注:一定要注意含有三个参数的使用场景，并且注意this关键字的使用
delegate函数
delegate函数有三个形参，和on函数有着相似之处，区别是参数位置不同。
$(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数)
$("ul").delegate("li","click",function(){
$(this).css("color","blue");
})
注：一定要注意这里的参数排列顺序和on函数的参数排列顺序不同。
总结
- 纵观上面的绑定事件，可以发现，不同的绑定事件只是换了一个关键字以及相对应的参数列表；
- 它们共有的都是
$("选择器").函数名(参数列表)；参数列表内容无外乎为事件名称，和匿名函数，或者是子节点选择器， - 这里的匿名函数，实际上就是一个存放代码体的地址，相当于参数是一个地址，只是为了减少代码量，直接将函数地址用匿名函数的形式代替了。
| 模板 | |
|---|---|
| 最常用 | $(“选择器”).事件名称(匿名函数) |
| bind函数 | $(“选择器”).bind({“事件名称”:匿名函数}) |
| on函数 | $(“选择器”).on(“事件名称”,匿名函数) |
| $(“父节点选择器”).on(“事件名称”,“孩子节点,即要绑定的元素”,匿名函数) | |
| delegate函数 | $(“父节点选择器”).delegate(“孩子节点,即要绑定的元素”,“事件名称”,匿名函数) |
视频教程推荐：jQuery视频教程
