可以用多种方法实现,on()  、 bind()  、 live()  、 delegate() ,还有one()。

有时我们可能会像下面这样绑定一个事件:

  1. $("#div1").click(function() {
  2. alert("点击后触发");
  3. });

上面的事件绑定,我们可以通过多种方式去实现:

1. on()

  1. //无数据参数
  2. $("p").on("click", function(){
  3. alert( $(this).text() );
  4. });
  5. //有数据参数
  6. function myHandler(event) {
  7. alert(event.data.foo);
  8. }
  9. $("p").on("click", {foo: "bar"}, myHandler)

与on()对应的是off(),用来移除事件绑定:

one():只绑定一次。

2. bind()

参数:

(type,[data],function(eventObject))

type: 含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

fn:绑定到每个匹配元素的事件上面的处理函数

(type,[data],false)

type:含有一个或多个事件类型的字符串,由空格分隔多个事件。比如"click"或"submit",还可以是自定义事件名。

data:作为event.data属性值传递给事件对象的额外数据对象

false: 将第三个参数设置为false会使默认的动作失效。

同时绑定多个事件类型:

  1. $('#foo').bind('mouseenter mouseleave', function() {
  2. $(this).toggleClass('entered');
  3. });

同时绑定多个事件类型/处理程序:

  1. $("button").bind({
  2. click:function(){$("p").slideToggle();},
  3. mouseover:function(){$("body").css("background-color","red");},
  4. mouseout:function(){$("body").css("background-color","#FFFFFF");}
  5. });

你可以在事件处理之前传递一些附加的数据。

  1. function handler(event) {
  2. alert(event.data.foo);
  3. }
  4. $("p").bind("click", {foo: "bar"}, handler)

通过返回false来取消默认的行为并阻止事件起泡。

  1. $("form").bind("submit", function() { return false; })

bind存在的问题

如果表格中要绑定单击事件的有10列500行,那么查找和遍历5000个单元格会导致脚本执行速度明显变慢,而保存5000个td元素和相应的事件处理程序也会占用大量内存(类似于让每个人亲自站在门口等快递)。

在前面这个例子的基础上,如果我们想实现一个简单的相册应用,每页只显示50张照片的缩略图(50个单元格),用户点击“第x页”(或“下一页”)链接可以通过Ajax从服务器动态加载另外50张照片。在这种情况下,似乎使用.bind()方法为50个单元格绑定事件又可以接受了。

事实却不然。使用.bind()方法只会给第一页中的50个单元格绑定单击事件,动态加载的后续页面中的单元格都不会有这个单击事件。换句话说,.bind()只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件(类似于新来的员工收不到快递)。

事件委托可以解决上述两个问题。具体到代码上,只要用jQuery 1.3新增的.live()方法代替.bind()方法即可:

  1. $("#info_table td").live("click",function(){/*显示更多信息*/});

这里的.live()方法会把click事件绑定到$(document)对象(但这一点从代码中体现不出来,这也是.live()方法饱受诟病的一个重要原因,稍后再详细讨论),而且只需要给$(document)绑定一次(不是50次,更不是5000次),然后就能够处理后续动态加载的照片单元格的单击事件。在接收到任何事件时,$(document)对象都会检查事件类型和事件目标,如果是click事件且事件目标是td,那么就执行委托给它的处理程序。

unbind():移除bind进行的绑定。

3. live()

到目前为止,一切似乎很完美。可惜,事实并非如此。因为.live()方法并不完美,它有如下几个主要缺点:

  • $()函数会找到当前页面中的所有td元素并创建jQuery对象,但在确认事件目标时却不用这个td元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销;
  • 默认把事件绑定到$(document)元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失;
  • 只能放在直接选择的元素后面,不能在连缀的DOM遍历方法后面使用,即$("#info_table td").live...可以,但$("#info_table").find("td").live...不行;
  • 收集td元素并创建jQuery对象,但实际操作的却是$(document)对象,令人费解。

解决之道

为了避免生成不必要的jQuery对象,可以使用一种叫做“早委托”的hack,即在$(document).ready()方法外部调用.live():

  1. (function($){
  2. $("#info_table td").live("click",function(){/*显示更多信息*/});
  3. })(jQuery);

在此,(function($){...})(jQuery)是一个“立即执行的匿名函数”,构成了一个闭包,可以防止命名冲突。在匿名函数内部,$参数引用jQuery对象。这个匿名函数不会等到DOM就绪就会执行。注意,使用这个hack时,脚本必须是在页面的head元素中链接和(或)执行的。之所以选择这个时机,因为这时候刚好document元素可用,而整个DOM还远未生成;如果把脚本放在结束的body标签前面,就没有意义了,因为那时候DOM已经完全可用了。

为了避免事件冒泡造成的性能损失,jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数:

  1. $("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});

这样,“受托方”就从默认的$(document)变成了$("#info_table")[0],节省了冒泡的旅程。不过,与.live()共同使用的上下文参数必须是一个单独的DOM元素,所以这里指定上下文对象时使用的是$("#info_table")[0],即使用数组的索引操作符来取得的一个DOM元素。

3. delegate()

如前所述,为了突破单一.bind()方法的局限性,实现事件委托,jQuery 1.3引入了.live()方法。后来,为解决“事件传播链”过长的问题,jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()。

使用.delegate(),前面的例子可以这样写:

  1. $("#info_table").delegate("td","click",function(){/*显示更多信息*/});

使用.delegate()有如下优点(或者说解决了.live()方法的如下问题):

  • 直接将目标元素选择符("td")、事件("click")及处理程序与“受拖方”$("#info_table")绑定,不额外收集元素、事件传播路径缩短、语义明确;
  • 支持在连缀的DOM遍历方法后面调用,即支持$("table").find("#info").delegate...,支持精确控制;

可见,.delegate()方法是一个相对完美的解决方案。但在DOM结构简单的情况下,也可以使用.live()。

提示:使用事件委托时,如果注册到目标元素上的其他事件处理程序使用.stopPropagation()阻止了事件传播,那么事件委托就会失效。

undelegate(): 移除delegate的绑定

原文连接 http://www.cnblogs.com/ranzige/p/4119078.html

jQuery事件绑定和委托的更多相关文章

  1. 深入学习jQuery事件绑定

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

  2. jQuery事件绑定、解绑、命名空间

    jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...

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

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

  4. javascript事件委托和jQuery事件绑定on、off 和one

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

  5. javascript 事件委托 和jQuery事件绑定on、off 和one

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

  6. jQuery事件绑定.on()简要概述及应用

    原文地址:http://www.jquerycn.cn/a_5346     前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看 ...

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

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

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

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

  9. 转:jQuery事件绑定.on()简要概述及应用

    前几天在看<jquery基础教程>,看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的. 然后在一处看到live()已经被移除了, ...

随机推荐

  1. c++保留小数问题,如有不足或错误,欢迎指出

    #include<iostream> #include <iomanip> using namespace std; int main() { double a; cin> ...

  2. AC日记——判断字符串是否为回文 openjudge 1.7 33

    33:判断字符串是否为回文 总时间限制:  1000ms 内存限制:  65536kB 描述 输入一个字符串,输出该字符串是否回文.回文是指顺读和倒读都一样的字符串. 输入 输入为一行字符串(字符串中 ...

  3. Python 开发轻量级爬虫04

    Python 开发轻量级爬虫 (imooc总结04--url管理器) 介绍抓取URL管理器 url管理器用来管理待抓取url集合和已抓取url集合. 这里有一个问题,遇到一个url,我们就抓取它的内容 ...

  4. NDK各版本下载

    含r8e,r9d,r10c 其中x86_64代表64位系统 官网上只有最新版下载链接,如果想要下载以前的版本,可打开 https://archive.org/web/ 然后输入 http://deve ...

  5. 使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析

    使用所见即所得文本编辑器编辑文本存入数据库后通过ajax获取服务器json_encode的数据到前台,文本内容上边的html标签不解析 因为我在前台使用了jquery的text()方法,而不是html ...

  6. SQLSTATE[HY000] [2003] Cant connect to MySQL server

    今天要连远程数据库,结果PHP报错 Fatal error: Uncaught exception 'PDOException' with message 'SQLSTATE[HY000] [2003 ...

  7. OC中NSDictionary和NSSet简单操作

    /** *  字典 存放键值对类型的数据 存放数据是无序的 */ // 字典在控制台输出是用{}包括起来的 // NSDictionary 不可变字典 // 1.创建对象 // 初始化方法 NSDic ...

  8. [HTML]background-size可以缩放大小

    转自:http://www.igooda.cn/jsdt/20130827355.html background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是co ...

  9. BZOJ 1584 打扫卫生

    好题! 本来想用一般的方法瞎搞个线段树什么的...发现不行... 然后翻题解. 注意到最优答案不会超过n,所以维护b[]数组,b[j]表示b[j]+1.....i有j个不同的数. 复杂度n√n. #i ...

  10. VS2015编译错误:调用的目标发生了异常---&gt;此实现不是Windows平台FLPS验证的加密算法的一部分。

    在Win10下安装好几次VS2015(企业版)了,这次发生了一个奇怪的问题,错误截图如下: 控制台.WPF等项目均有此错误!但是ASP.NET项目却可以编译运行!一开始还以为VS2015安装错误,修复 ...