首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

jQuery的.bind()与.on()

好的,我来尝试回答这个问题。

首先,我们需要了解jQuery的.bind()和.on()方法的基本概念。

.bind()是一个事件绑定方法,它可以将一个事件处理函数绑定到一个或多个元素上,以便在事件触发时执行该函数。.bind()方法的语法如下:

代码语言:javascript
复制
.bind( eventType [, eventData ], handler )

.on()方法也是一个事件绑定方法,它可以将一个事件处理函数绑定到一个或多个元素上,以便在事件触发时执行该函数。.on()方法的语法如下:

代码语言:javascript
复制
.on( events [, selector ] [, data ], handler )

在使用.bind()和.on()方法时,需要注意以下几点:

  1. .bind()方法只能绑定一个事件处理函数,而.on()方法可以绑定多个事件处理函数。
  2. .bind()方法只能绑定到已存在的元素上,而.on()方法可以绑定到未来可能存在的元素上。
  3. .bind()方法不支持事件委托,而.on()方法支持事件委托。

在选择使用.bind()还是.on()方法时,需要根据具体的需求和场景来决定。如果需要绑定多个事件处理函数,或者需要支持事件委托,建议使用.on()方法。如果只需要绑定一个事件处理函数,并且不需要支持事件委托,可以使用.bind()方法。

总之,.bind()和.on()方法都是jQuery中常用的事件绑定方法,它们各有优缺点,需要根据具体的需求和场景来选择使用。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

jQuery中on()、bind()、live()、delegate()之间区别

jQuery.on()、.bind()、.live()和.delegate()之间区别并非总是那么明显,然而,如果我们对所有的不同之处都有清晰理解的话,那么这将会有助于我们编写出更加简洁代码,.../jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替 $(selector).delegate(childSelector...及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式; event 必需项;添加到元素一个或多个事件,例如 click,dblclick等; 单事件处理:例如...;适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替。...接下来就详细说下几者之间区别: 1 .bind() .bind()是直接绑定在元素上,也很好解决了浏览器在事件处理中兼容问题。

1.2K30
  • JQuerybind()和unbind()理解「建议收藏」

    大家好,又见面了,我是你们朋友全栈君。 bind()和unbind()提供了事件绑定和取消机制,既可以绑定html默认支持事件,也能够绑定自定义事件。...1、JQuery中事件可以重复绑定,不会覆盖。...如果我们指定了自定义参数,那么JQuery会将它放在事件对象data属性中,即通过eventObject.data就能够拿到我们传递参数值。 4、事件取消三种形式。...可以看到这种做法非常不好,因为这种做法不允许使用匿名函数,我们不得不暴露全局函数(至少要求unbind时候能够看得见)。JQuery提供了事件命名空间机制 5、事件命名空间。...这里值得一提:使用了命名空间unbind并不冲突,上面三种形式unbind依然可以正常使用。

    1.3K30

    关于jQuerybind动态绑定事件无效处理

    最近在进行页面开发,在做页面特效时候,需要给一个动态加载按钮赋予一个事件 于是不假思索 用$(obj).bind(); 来绑定事件 。...但是这样存在一个问题: bind确实能绑定事件,但是那是相对于固定html标签来说 当页面内容属于动态加载时候,bind事件就存在一个bug, 只能bind一次,当你第二次触发事件时候就没用了...例如: 我给标签赋予一个click , 标签包括内容都是从后台数据读取然后动态加载 。...当我使用bind来绑定click事件,这时, 第一次点击click能成功触发 但是第二次点击,click事件无效了......后面研究发现,jQuery还有个绑定事件方法:delegate(); 用法如下: $(".sentnum-box").delegate(".a-add-ordergoods","click",function

    1.3K20

    jquery 绑定事件 bind() unbind() 以及 事件函数列表

    mouseleave() 鼠标离开(离开子元素不触发) hover() 同时为mouseenter和mouseleave事件指定处理函数 ready() DOM加载完成 resize() 浏览器窗口大小发生改变...scroll() 滚动条位置发生变化 submit() 用户递交表单 绑定事件其他方式 $(function(){ $('#div1').bind('mouseover click', function...(event) { alert($(this).html()); }); }); 取消绑定事件 $(function(){ $('#div1').bind('mouseover...可以看到,使用这种方式绑定click事件也是可以。 那么,如果希望点击一次就不能点击,就可以设置一下解绑事件,如下: ? 从这里可以看出,只能触发一次click事件。因为已经解除绑定了。...那么解绑是不是也一样可以写多个呢? ? 解除绑定的确可以写多个事件同时解除。

    1.6K20

    jQuery(function(){})(function(){})(jQuery)区别

    三、总结 jQuery(function(){ });用于存放操作DOM对象代码,执行其中代码时DOM对象已存在。...不可用于存放开发插件代码,因为jQuery对象没有得到传递,外部通过jQuery.method也调用不了其中方法(函数)。...(function(){ })(jQuery);用于存放开发插件代码,执行其中代码时DOM不一定存在,所以直接自动执行DOM操作代码请小心使用。 补充: (function($){...})...这就定义了一个匿名函数,参数为arg 而调用函数时,是在函数后面写上括号和实参,由于操作符优先级,函数本身也需要用括号,即: (function(arg){...})...(jQuery)则是一样,之所以只在形参使用$,是为了不与其他库冲突,所以实参用jQuery ,上述也可以这样写:var fn = function($){....}; fn(jQuery);

    859100

    std::functionstd::bind

    一、背景介绍: 函数指针始终不太灵活,它只能指向全局或静态函数,对于类成员函数、lambda表达式或其他可调用对象就无能为力了,因此,C++11推出了std::functionstd::bind这两件大杀器...,他们配合起来能够很好替代函数指针。...二、内容介绍: bind提供两类比较重要功能: 一个是:可以自定义参数位置,补充进来需要函数里面缺少参数(备注:这里主要针对Class里面的成员函数里面的默认参数this) 1. bind里面的参数顺序代码示例...auto f1 = std::bind(f, _2, 42, _1, _3, n); n = 10; // 参数对应关系为:1--》n3,2-->n1,42--->n2,1001-->...std::cout << "1) bind to a pointer to member function: "; Foo foo; // 这里&foo就是为了补齐成员变量里面的默认参数

    83910

    DNS(bind)服务器安装配置

    DNS基础   DNS 是计算机域名系统 (Domain Name System 或Domain Name Service) 缩写,域名服务器是进行域名(domain name)和之相对应IP地址...DNS中保存了一张域名(domain name)和之相对应IP地址 (IP address)表,以解析消息域名。...因为DNS是逐级管理,所以在不同层级中主机名域名也是不同;以www.google.com为例,在第二层中,.com就是域名,google就是主机名,而到了第三层中,.google.com就成了域名...注意:主机名域名并不是依据"."来划分,主机名中也可以包含"."号,主要还是要根据域名注册情况来划分。   3、正向解析     从FQDN转换为IP地址称为正向解析。   ...正向解析反向解析使用不同解析库。   资源记录:rr(resource record),有类型概念;用于此记录解析属性。

    11.5K33

    DomJqueryajax

    Domjquery互相转换 DOM是文档对象模型(Document Object Model,简称DOM) jQuery是一个JavaScript 库,极大地简化了JavaScript编程。...domjq互转,jq对象只能用jq方法,dom对象只能用内置dom方法,不能互窜 $(“#test”) //jq对象 $(“#test”)[0] //dom对象 $(“#test”).get(0)...//domjquery互相转换 //取得标签中value属性内容[dom对象->jquery对象] var inputElement = document.getElementById...(value); //取得 标签中文本内容[jquery对象->dom对象,方法一] var $div = $("#divID");//jQuery对象 var divElement...text(val):设置所有匹配元素文本内容 html() 类似, 但将编码 HTML (将 “” 替换成相应HTML实体). 3.VAL val():获得第一个匹配元素的当前值

    52910

    std和boostfunctionbind实现剖析

    如何控制调用时占位符位置和区分占位符传入参数? 首先,需要知道是,bind函数返回是一个叫bind_t模板类。并且这是个可调用对象(重载了operator()操作符)。...图1: bind_t 内存结构 bind_t里包含了两个成员,一个用于存可调用仿函数functor,另一个用于保存执行bind函数时传入参数列表list。...在这之中,functor和list内参数个数和类型任意变化都会导致最终生成bind_t类型变化,但是对最外层bind接口,就把返回值都统一成了bind_t模板。...在bind一个函数或者对象时候,可以在绑定期(就是调用bind函数时候)传入一些参数,也可以在执行时候传入一些参数。...图7: Boost 1.55.0 bind执行流程略图 执行流程解决了,最后就剩第三个问题,如何控制调用时占位符位置和区分占位符传入参数。

    1K30

    std和boostfunctionbind实现剖析

    如何控制调用时占位符位置和区分占位符传入参数? 首先,需要知道是,bind函数返回是一个叫bind_t模板类。并且这是个可调用对象(重载了operator()操作符)。...在这之中,functor和list内参数个数和类型任意变化都会导致最终生成bind_t类型变化,但是对最外层bind接口,就把返回值都统一成了bind_t模板。...在bind一个函数或者对象时候,可以在绑定期(就是调用bind函数时候)传入一些参数,也可以在执行时候传入一些参数。...[](p938_07.png) 图7: Boost 1.55.0 bind执行流程略图 执行流程解决了,最后就剩第三个问题,如何控制调用时占位符位置和区分占位符传入参数。...使用过boostbind和function童鞋应该看到过它里面的一个注意事项,就是如果bind函数参数是引用类型,应该在执行bind函数时使用引用包装(boost::ref或者std::ref)。

    1.8K10

    JavaScript中apply、call、bind区别用法

    语法: fun.call(thisArg, arg1, arg2, ...) 1.3 Function.prototype.bind() bind()方法创建一个新函数, 当被调用时,将其this关键字设置为提供值...2.2 call apply方法用法 ? 结果相同,call()和apply(),第一个参数都是要绑定上下文,后面的参数是要传递给调用该方法函数。...不同之处在于,在给调用函数传递参数时,apply()是数组,call()参数是逐个列出。 2.3 bind()用法 ? bind方法传递给调用函数参数可以逐个列出,也可以写在数组中。...bind方法call、apply最大不同就是前者返回一个绑定上下文函数,而后两者是直接执行了函数。因此,以上代码也可以这样写: ?...总结bind()用法:该方法创建一个新函数,称为绑定函数,绑定函数会以创建它时传入bind()第一个参数作为this,传入bind()第二个以及以后参数加上绑定函数运行时本身参数按照顺序作为原函数参数来调用原函数

    1.2K20

    std::functionstd::bind使用总结

    ::functionstd::bind这两件大杀器。...std::functionstd::bind双剑合璧 刚才也说道,std::function可以指向类成员函数和函数签名不一样函数,其实,这两种函数都是一样,因为类成员函数都有一个默认参数,this...,作为第一个参数,这就导致了类成员函数不能直接赋值给std::function,这时候我们就需要std::bind了,简言之,std::bind作用就是转换函数签名,将缺少参数补上,将多了参数去掉...用法就是第一个参数是要被指向函数地址,为了区分,这里std::bind语句左值函数为原函数,右值函数为新函数,那么std::bind方法从第二个参数起,都是新函数所需要参数,缺一不可,而我们可以使用...值得注意有两点: 一旦bind补充了缺失参数,那么以后每次调用这个function时,那些原本缺失参数都是一样,举个栗子,上面代码中callback6,我们每次调用它时候,第二个参数都只会是100

    11.1K92

    jQuery中find&filter、live&bind对比介绍及图片懒加载

    二. jQuery中绑定事件有三种方法: 以click事件为例 1. target.click(function(){}); 2. target.bind("click",function(){...,下面着重讲解一下,因为这个如果用到Jquery框架的话是用挺多,尤其要注意二者区别。...bind和live区别 live方法其实是bind方法变种,其基本功能就同bind方法功能是一样,都是为一个元素绑定某个事件,但是bind方法只能给当前存在元素绑定事件,对于事后采用JS等方式新生成元素无效...之所以jquery要保留bind方法而不是采用live方法去替代bind,也是因为live在某些情况下是不能够完全替代bind。...如下: 1. bind方法可以绑定任何JavaScript事件,而live方法在jQuery1.3时候只支持click、dblclick、 keydown、 keypress、 keyup、mousedown

    70231
    领券