• 技术文章 >web前端 >前端问答

    jquery中on方法的优势是什么

    青灯夜游青灯夜游2022-09-09 18:08:17原创154

    jquery中on方法的优势:1、on()方法可以绑定动态添加到页面元素的事件,其添加的事件处理程序适用于当前及未来的元素;2、on()方法一次性能给元素添加一个或多个事件处理程序,可以提升效率。

    大前端零基础入门到就业:进入学习

    本教程操作环境:windows7系统、jquery3.6.1版本、Dell G3电脑。

    on() 方法在被选元素及子元素上添加一个或多个事件处理程序。

    自 jQuery 版本 1.7 起,on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利,我们推荐使用该方法,它简化了 jQuery 代码库。

    对于单个元素注册事件分开写比较麻烦

    $("p").click(function(){
      $(this).hide();
    });
    $("p").mouseenter(function(){
      $(this).css("background","blue");
    });

    所以可以通过on来一次性注册多个事件

    $("p").on({
      click:function(){
        $(this).hide();
      },
      mouseenter:function(){
        $(this).css("background","blue");
      }
    });
     
    //还可以合并
    $("div").on( "mouseenter mouseleave", function(){
        $(this).toggleclass( "current");
    })

    jQuery绑定事件的方法有几种,推荐使用.on()方法绑定,原因有2点:

    1、on()方法可以绑定动态添加到页面元素的事件

    比如动态添加到页面的DOM元素,用.on()方法绑定的事件不需要关心注册该事件的元素何时被添加进来,也不需要重复绑定。有的同学可能习惯于用.bind()、.live()或.delegate(),查看源码就会发现,它们实际上调用的都是.on()方法,并且.live()方法在jQuery1.9版本已经被移除。

    使用 on() 方法添加的事件处理程序适用于当前及未来的元素(比如由脚本创建的新元素)。

    bind:

    function(
     types, data, fn ) {
      return this.on(
     types, null,
     data, fn );
    },

    live:

    function(
     types, data, fn ) {
      jQuery(
    this.context
     ).on( types, this.selector,
     data, fn );
      return this;
    },

    delegate:

    function(
     selector, types, data, fn ) {
      return this.on(
     types, selector, data, fn );
    }

    2、on()方法一次性能给元素添加一个或多个事件处理程序,可以提升效率

    很多文章都提到了利用事件冒泡和代理来提升事件绑定的效率,大多都没列出具体的差别,所以为了求证,我做一个小测试。

    假设页面添加了5000个li,用chrome开发者工具Profiles测试页面载入时间。

    $("li").click(function(){
      console.log(this)
    });
    $(document).on("click","li",function(){
      console.log(this)
    })

    绑定过程的执行时间

    【推荐学习:jQuery视频教程web前端视频

    以上就是jquery中on方法的优势是什么的详细内容,更多请关注php中文网其它相关文章!

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:jquery
    上一篇:jquery怎么获取元素有几个子元素 下一篇:jquery可以获取链接的内容吗
    VIP课程(WEB全栈开发)

    相关文章推荐

    • ❤️‍🔥共22门课程,总价3725元,会员免费学• jquery能改变文本内容吗• jquery怎么实现双击隐藏元素• jquery+swiper实现时间轴tab滑动切换显示效果• jquery怎么修改元素的transform属性• jquery怎么改变input的value属性
    1/1

    PHP中文网