作者信息

长期闲置

长风破浪会有时,直挂云帆济沧海。

最近文章
ajax请求时post和get的区别是什么865
ajax默认是异步请求吗346
cors和ajax的区别是什么620
视频教程分类
推荐视频教程
  • php程序员小白到大牛三个月集训php程序员小白到大牛三个月集训
  • Laravel 9 学习正当时—保姆级教程,想学不会都难!Laravel 9 学习正当时—保姆级教程,想学不会都难!
  • 千万级数据并发解决方案(理论+实战)千万级数据并发解决方案(理论+实战)
  • Laravel基础与实战(模块化)Laravel基础与实战(模块化)
  • 首页 >web前端 >前端问答 > 正文

    jquery绑定事件是什么意思

    原创2022-06-24 17:30:36846 关注公众号:每天精选资源文章推送

    在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视频教程

    以上就是jquery绑定事件是什么意思的详细内容,更多请关注php中文网其它相关文章!

    20期PHP线上班

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。

  • 相关标签:jquery
  • 推荐:PHP从基础到实战教程视频

    相关文章

    相关视频


    专题推荐