[ jQuery] jquery的click(),bind(),on()区别~

最新推荐文章于 2020-11-03 10:14:01 发布
最新推荐文章于 2020-11-03 10:14:01 发布
阅读量2.5k 收藏 1
点赞数
分类专栏： jquery 文章标签： jquery js html

这里只是突然发现jquery 1.7 之后的事件绑定推荐了一些变化。jquery推荐使用on方法来绑定事件。

相信以前都是用的click,bind,unbind方法吧。

如果你仔细看看jquery的源码的话，那么你会发现bind的方法也是用的on方法来实现的。

在一定程度上on方法比bind或者是click之类的方法，更高效。

下面只是一个demo，当然这里包含了jquery的插件的写法。

关于jquery的插件的写法，可以自行百度。如果你的自学能力够厉害的话，可以查看jquery的源码。

[html]  view plain copy 在CODE上查看代码片 派生到我的代码片
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  3. <head>  
  4.   <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
  5.    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>  
  6.   <title></title>  
  7. </head>  
  8. <body>  
  9.     <input type="button" value="test" id="test"/>  
  10.     <script type="text/javascript">  
  11.         $(function(){  
  12.             $("#test").hello({  
  13.                 "size":1  
  14.             });  
  15.         });  
  16.     </script>  
  17.     <script type="text/javascript">  
  18.     ;(function($){  
  19.         $.fn.hello = function(options){  
  20.             var defaults = {"size":0},  
  21.   
  22.                 opts     = $.extend({},defaults,options),  
  23.   
  24.                 show = {  
  25.                     play:function(options){  
  26.                         var _root =  this;   
  27.                         _root.autoPlay();  
  28.                         _root.eventClick();  
  29.                     },  
  30.                     autoPlay:function(){  
  31.                         console.log("auto");  
  32.                     },  
  33.                     eventClick:function(){  
  34.                         //$("#test").on("click",{show:"dd"},function(e){  
  35.                         //    console.log("click :" +  e.data.show);  
  36.                         //});  
  37.   
  38.                         $("#test").on({  
  39.                             click:function(){  
  40.                                 alert("click");  
  41.                             },  
  42.                             mouseenter:function(){  
  43.                                 alert("enter");  
  44.                             },  
  45.                             mouseleave:function(){  
  46.                                 alert("leave");  
  47.                             }  
  48.                         });  
  49.                     }  
  50.                 };  
  51.             return this.each(function(){  
  52.                 show.play(opts);  
  53.             });  
  54.         };  
  55.     })(jQuery);  
  56.     </script>  
  57. </body>  
  58. </html>  

转载自 http://blog.csdn.net/yangzhihello/article/details/17632187

w553093346
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery绑定事件方法及区别(bind,click,on,live,one)
10-19
主要介绍了jq绑定事件方法及区别,通过五种绑定方式使用bind()进行操作,并和one()进行区分,需要的朋友可以参考下
jquery中的live、on、onclick、bind
qianyiyiding的专栏
06-07 813
Jquery中的事件绑定有三种方式： onclick事件 onclick非常好理解，点击时候触发onclick函数中的代码执行 $("button").onclick( $("p").slideToggle();//显示和隐藏 ); bind函数 bind方法是为某个元素绑定一个事件，bind的方法只能给已经存在的DOM元素绑定事件，对于后面JS中新增加的元素是没有效果的，也即是说Jquer
JQuery事件绑定函数：on()与bind()的差别
热门推荐
aty
02-09 1万+
JQuery从1.7+版本开始，提供了on()和off()，进行事件处理函数的绑定和取消。这2个API与JQuery最初提供的bind()和unbind()有很多相似的地方，也有一些不同之处。bind和unbind的详细介绍，可以参考这篇文章。   on()和bind()的函数签名如下： bind(type, [data], fn) on(type,[selector],[data],fn
jquery的bind跟on绑定事件的区别
hanglife的博客
05-13 177
jquery的bind跟on绑定事件的区别：主要是事件冒泡； jquery文档中bind和on函数绑定事件的用法： .bind(events [,eventData], handler) .on(events [,selector] [,data], handler) 从文档中可以看出，.on方法比.bind方法多一个参数'selector' .on的selector参数是筛选出...
JavaScript(14) jquery三种点击事件(click、on、bind)
郑清
11-06 1万+
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>添加点击事件</title> <script type="text/javascript" src="js/jquery/jquery-1.11.2.js"></scr...
jQuery里面的 .on 和 .bind 的区别
weixin_52139094的博客
11-03 461
on 和 bind 的区别 1. on 可以多一个 selector 参数,可以给子元素添加事件. bind 只能给自己添加事件 2. 使用on添加的事件比如给自己子集使用类选择器添加的 ,后来创建的含有这个类名的子节点也有事件 on 在选择元素上绑定一个或多个事件处理函数 $('h1:eq(0)').on('click',function(){ alert('11111') }) bind 在选择元素上绑定一个或多个事件处理函数 $('#foo').bind('mouseenter mousel
jQuery方法深入理解笔记--click、on、bind
qq_37142038的博客
04-10 141
bind 1. $(".tab").click(function () {}) 2. $(".tab").on("click",function () {}) 3. $(document).on("click", ".tab",function () {}) 4. 使用<οnclick="">触发函数 以上四种方法在不同设备上的可行程度 自测。 3&gt...
jq绑定事件方法及区别
柠檬麻麻
07-30 915
第一种方式：$(document).ready(function(){ $("#clickme").click(function(){ alert("hello world click") }) })第二种方式（简写方式为第一种）：$('#clickmebind').bind("click", function(){ alert("Hello World bi
jQuery的三种bind/One/Live/On事件绑定使用方法
10-20
总结来说，jQuery的事件绑定机制从`bind()`发展到`on()`，旨在提高性能和代码的简洁性。`one()`保持不变，用于一次性事件绑定。`live()`和`delegate()`的功能已经被`on()`完全涵盖，并且由于性能原因，推荐使用`on...
jQuery中的on与bind绑定事件区别实例详解
01-21
on(events,[selector],[data],fn) events:一个或多个用空格分隔的事件类型和可选的命名空间，如”click”或”keydown.myPlugin” 。 selector:一个选择器字符串用于... jQuery 3.0中已弃用此方法，请用 on()代替。
addEventListener、onclick和jquery的bind()、click()
weixin_34241036的博客
08-24 562
addEventListener("click",function(event){},false); removeEventListener("click",function(event){},false); 1 target.addEventListener(type, listener, options); 2 target.addEventListener(type, listen...
jquery: click()与bind('click')的区别
textboy的专栏
05-06 2374
From http://www.cnblogs.com/zagelover/articles/2840762.html 总体一样，但bind的适用面更广，可以传参，e.g. var message = "right"; $("a").bind("contextmenu", function() { alert(message); return false; });
jquery中bind与on的区别
胡世林的博客
08-15 6154
浅谈jquery的bind与on的区别====委托事件
jquery bind on 区别
document_ljt的博客
08-23 539
on 和 bind 用法 bind(type,click,fn) on(type,[selector],click,fn) 用 on绑定事件可以设置 selector可以阻止时间冒泡 bind则不可行    
关于jQuery绑定事件on和bind的区别详解 -- sanai
肖明伟 的博客
02-21 4250
如题，jQuery两种绑定事件，举例说明： //对于ul_li的绑定方法 //方法一：$("ul li").bind("click",function(){console.log($(this))});//方法二：$("ul li").on("click",function(){console.log($(this))});//方法三 【推荐】 $("ul").on("click","li",
jquery绑定事件 bind和on的区别
nO0b
10-12 6204
bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型，事件委托就是子类的事情委托给父类的去做 最直观的区别就是on绑定比bind绑定多一个参数'childSelector' 语法 $(selector).on(event,childSelector,data,function) 参数 描述 event 必需。规定要从被选元素移除的一个...
JQuery的on和bind的区别
lanhezhong的博客
03-06 1586
在js中为某个元素绑定事件时，我们常用到on函数和bind函数，两个函数有什么区别，什么时候用哪个函数，今天脑残小编简单介绍一下，不喜勿喷； 长话短说进入正题. 先看两个方法的写法 $("body").on("click", ".button", function(){ //do something }) $("body .button").bind("click", function(){...
jquery .bind用法
最新发布
06-03
在 jQuery 中，`.bind()` 方法用于将一个或多个事件处理程序附加到匹配元素的特定事件上。它的语法如下： ```javascript $(selector).bind(event, data, callback); ``` 其中： - `selector`：需要绑定事件处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值