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. Dockerfile设置apt-get install tzdata的noninteractive方法

    在Ubuntu系统中,执行命令apt-get install -y tzdata以安装tzdata软件包.但是,最近发现,在Ubuntu 18.04 (Bionic Beaver)上无法自动安装该软件 ...

  2. Entity Framework Code-First(10.2):Entity Mappings

    Entity Mappings using Fluent API: Here, we will learn how to configure an entity using Fluent API. W ...

  3. NIO和Reactor

    本文参考Doug Lea的Scalable IO in Java. 网络服务 随着网络服务的越来越多,我们对网络服务的性能有了更高的要求,提供一个高性能,稳定的web服务是一件很麻烦的事情,所以有了n ...

  4. Linux下查看文件编码,文件编码格式转换和文件名编码转换

    linux相关   2008-10-07 10:46   阅读1392   评论0   字号: 大大  中中  小小  如果你需要在Linux中 操作windows下的文件,那么你可能会经常遇到文件编 ...

  5. Linux——DNS

    正向解析和逆向解析  正向域名解析,即DNS解析,是通过域名查询IP的解析方式.  逆向域名解析,即反向DNS解析,是通过IP地址查询域名. [root@localhost ~]# cp /var ...

  6. Lxc容器基本用法

    你将学到什么 如何安装LXC 如何创建LXC容器 如何管理LXC容器 如何查询进程所属Namespace 如何给LXC容器添加网卡 如何限制LXC容器资源 环境 x64 Ubuntu 14.04.3 ...

  7. remap——ROS中修改订阅的节点名称

    跑数据集或者使用不同传感器时,难免会遇到需要修改topic名称的时候,此时可以有两种做法. 一.直接修改源码.如果有launch文件,则修改launch文件对应的topic 二.直接进行remap操作 ...

  8. Codeforces Round #523 (Div. 2)C(DP,数学)

    #include<bits/stdc++.h>using namespace std;long long a[100007];long long dp[1000007];const int ...

  9. WPF动画——故事板(Storyboard)

    1.XAML代码 <Window x:Class="故事板.MainWindow" x:Name="window" xmlns="http:// ...

  10. 洛谷P1310 表达式的值

    P1310 表达式的值 题目描述 对于1 位二进制变量定义两种运算: 运算的优先级是: 先计算括号内的,再计算括号外的. “× ”运算优先于“⊕”运算,即计算表达式时,先计算× 运算,再计算⊕运算.例 ...