jQuery从1.7+版本开始,提供了on()和off()进行事件处理函数的绑定和取消。on()和bind()这两个方法有相同的地方也有不同的地方.

bind(type,[data],fn);

on(type,[selector],[data],fn);

两者的区别就在于是否支持selector这个参数值。如果使用on的时候,不设置selector,那么on与bind就没有区别了。

e<div id="parent">
<input type = "button" value="a" id=“a”>
<input type = "button" value="b" id=“b”>
</div>

  上面的代码中,如果我们使用bind()在parent上绑定了click事件处理函数,当点击a或者b按钮的时候,都会执行事件处理函数。如果我们希望点击a的时候触发,点击b的时候不触发,那么可以使用on,代码如下:

$("#parent").on("click","#a",function(){
alert($(this).attr("id"));
})

bind方法无法实现该功能。

还有一点需要注意:on绑定的事件处理函数,对于未来新增的元素一样可以的,和delegate效果相同,而bind则不行。

delegate用法与on()相同,只是参数的顺序不同:

delegate([selector],type,[data],fn);

还有一个live()方法,在jQuery1.9中被移除了,完全可以使用on()来替代它得作用,不建议使用此方法。

jQuery事件绑定函数:on()与bind()的差别的更多相关文章

  1. js事件委托和jQuery事件绑定on , off , one , bind , unbind , die

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

  2. jquery事件绑定函数

    1.bind 使用语法: jQueryObject.bind( events [, data ], handler ) jQueryObject.bind( events [, data ] [, i ...

  3. jQuery事件绑定on()、bind()与delegate() 方法详解

    jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...

  4. jQuery事件绑定方法bind、 live、delegate和on的区别

    我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 1.准备知识 当我们在开始的时候,有些知识是必须具备的: 1 ...

  5. JS+Zero Clipboard swf复制到剪贴板 兼容浏览器(bind事件绑定函数)

    转自http://www.ipmtea.net/css_ie_firefox/201107/07_499.html 1.ZeroClipboard其实是国外的一个js类库,源码结构如: var Zer ...

  6. JQuery事件绑定,bind与on区别

    jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...

  7. 深入学习jQuery事件绑定

    × 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...

  8. jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...

  9. javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)

    一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...

随机推荐

  1. JVM原理解析

    JVM主要的功能: 内存分配 程序调度 内存释放(栈等自动释放.堆垃圾回收) 异常处理 https://www.cnblogs.com/dingyingsi/p/3760447.html https: ...

  2. shell script-条件语句、循环语句

    条件语句 #!/bin/bash read -p "input your name:" name #第一种判断 if [ "$name" == "Mi ...

  3. 18. CTF综合靶机渗透(十一)

    靶机描述: SkyDog Con CTF 2016 - Catch Me If You Can 难度:初学者/中级 说明:CTF是虚拟机,在虚拟箱中工作效果最好.下载OVA文件打开虚拟框,然后选择文件 ...

  4. 20169201 2016-2017-2 实验二《Java面向对象程序设计》

    实验一:程序设计中临时变量的使用 代码托管 1.删除数组中的元素5 for(int i = 4; i < arr.length - 1; i ++){ arr[i] = arr[i + 1]; ...

  5. 将前台传回的HttpServletRequest转换成HashMap

    import java.util.HashMap;import java.util.Map;import java.util.Map.Entry;import java.util.Set; impor ...

  6. ASP.NET MVC 小牛之旅3:Routing——网址路由

    网址路由(Routing)在ASP.NET MVC中有两个主要用途,一个用途是匹配通过浏览器传来的HTTP请求,另一个用途则是响应适当的网址给浏览器. 3.1匹配通过浏览器传来的HTTP请求 首先我们 ...

  7. OpenStack基础知识-单元测试工具介绍

    针对以前学的内容的一个简单整理 1.单元测试工具介绍 unittest: 是 Python 的标准库,提供了最基本的单元测试功能,包括 单元测试运行器(简称runner) 和 单元测试框架.项目的单元 ...

  8. 51nod1043(数位dp)

    题目链接:https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1043 题意:中文题诶- 思路:数位dp 我们用dp[i][j ...

  9. springmvc json 简单例子

    1.控制器层: @RequestMapping("/json.do") @ResponseBody //将会把返回值 转换为json对象 public List<User&g ...

  10. PAT甲级——1101 Quick Sort (快速排序)

    本文同步发布在CSDN:https://blog.csdn.net/weixin_44385565/article/details/90613846 1101 Quick Sort (25 分)   ...