JQuery的on和bind的区别

最新推荐文章于 2024-06-18 16:07:09 发布

我是何

最新推荐文章于 2024-06-18 16:07:09 发布

阅读量1.6k

点赞数 1

分类专栏： JQuery 文章标签： jquery javascript on bind on和bind

本文链接：https://blog.csdn.net/lanhezhong/article/details/60583214

版权

JQuery 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

在js中为某个元素绑定事件时，我们常用到on函数和bind函数，两个函数有什么区别，什么时候用哪个函数，今天脑残小编简单介绍一下，不喜勿喷；

长话短说进入正题.

先看两个方法的写法

$("body").on("click", ".button", function(){
//do something
})

$("body .button").bind("click", function(){
//do something
})

相同点：意思都是每当点击body中样式为button的元素，就会执行function中的代码；

不同点：

on方法主要强调点击body，并且所点击的元素包含button样式时，执行函数方法；

bind强调点击样式为button的元素时，执行函数代码；假如页面中暂时还没有这个元素，那么这个事件就会无效；

所以如果你要添加事件的元素是后面动态加载进来的，建议直接用on方法绑定事件，或者待元素加载进来后再次调用一下bind函数绑定事件；
如果你能确保js执行之前你要绑定事件的元素已经加载了，建议用bind方法，个人认为bind方法效率应该比on方法效率高（没亲测过）；

往下看往下看------》

此外，下面做一个实验，写一个简单的html如下：

<!DOCTYPE html>
<html lang="zh-CN">
   <head>
       <style>.blue{color:blue;}</style>
       <script src="js/jquery-1.11.1.min.js"></script>
</head>
   <body>
       <div class="blue">点击这里改变颜色</div>
   </body>
   <script>
           //1、用这种bind方式,当元素样式发生改变，不再满足前面的选择器时，这个事件依旧有效//
           $("div.blue").bind("click", function(){
               if($(this).hasClass("blue")){
                   $(this).removeClass("blue");
               }else{
                   $(this).addClass("blue");
               }
           });
           //2、用这种on方式,当on方法里面的选择器样式发生改变时，这个事件会失效//
   /*       $("body").on("click", "div.blue", function(){
               if($(this).hasClass("blue")){
                   $(this).removeClass("blue");
               }else{
                   $(this).addClass("blue");
               }
           }); */
   </script>
</html>

打开上面编写的html页面，如果用script中的第一种方法，即：

$("div.blue").bind("click", function(){
   if($(this).hasClass("blue")){
       $(this).removeClass("blue");
   }else{
       $(this).addClass("blue");
   }
});

发现点击文字时，文字颜色会一直可以在蓝和黑之间切换。

若把第一种方式注释掉，改用第二种方式：

$("body").on("click", "div.blue", function(){
   if($(this).hasClass("blue")){
       $(this).removeClass("blue");
   }else{
       $(this).addClass("blue");
   }
});

发现第一次点击文字时，文字颜色由蓝变黑，接着再点击就不会变化了。

为何呢？下面来说明原因

第一种bind的主体是$("div.blue")，这个元素找出来后给它绑定点击事件，然后这个元素无论怎么改变，只要它还存在，那这个绑定的事件会一直有效。

第二种on的主体是$("body")，当你每一次点击body元素时都会进行检查，从你点击的最小元素往上一直检查是否有满足div.blue选择条件的元素，如果有就会运行事件里的方法代码。因此上面点击一次之后，blue样式被移除了，再点击第二次时检查条件不再满足，也就不会再能改变文字颜色。也就是说，这个点击事件还是存在的，存在于body上，每次点击body的时候也都还是会进行检查，只是找不到指定选择条件的元素了，因此没有执行绑定的方法。

author：蓝何忠

email：lanhezhong@163.com

我是何

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
JQuery的on和bind的区别

在js中为某个元素绑定事件时，我们常用到on函数和bind函数，两个函数有什么区别，什么时候用哪个函数，今天脑残小编简单介绍一下，不喜勿喷；长话短说进入正题.先看两个方法的写法$("body").on("click", ".button", function(){//do something})$("body .button").bind("click", function(){...
复制链接

扫一扫

专栏目录