转:jQuery事件绑定.on()简要概述及应用
前几天在看《jquery基础教程》，看到事件委托的时候，关于live()方法讲的不是很详细，就去搜了一下关于live()和delegate()的。
然后在一处看到live()已经被移除了，囧，然后去看了最新的jq源码，果然被移除了，现在是1.9.1版本，不知道live()是在之前哪个版本被移除的，惭愧啊，之前都没留意。
看源码发现bind()和delegate()都是由on()实现的。on()的描述如下：
.on( events [, selector ] [, data ], handler(eventObject) ) //~~~ on可以实现事件绑定和事件委托 低版本的jQuery好像没有on方法 如 jQuery.1.6
一个简单的事件绑定如 $('button').on('click',function(){}); 与bind()无二样。
在需要为较多的元素绑定事件的时候，优先考虑事件委托，可以带来性能上的好处。比如：
$(document).ready(function(){
$(document).on('click',function(e){ console.log(e.target.tagName + ' is clicked');});
}
<body><p>iam p</p><button> iam button</button></body>
将click事件绑定在document对象上，页面上任何元素发生的click事件都冒泡到document对象上得到处理。
注意到.on()的描述中第二个可选参数：selector。如下图，添加了第二个参数，选择符button：
$(document).ready(function(){
$(document).on('click', 'button', function(e){console.log(e.target.tagName + ' is clicked');});
}
当事件冒泡到document对象时，检测事件的target，如果与传入的选择符（这里是button）匹配，就触发事件，否则不触发。
注意.on()也可以接收一个对象参数，该对象的属性是事件类型，属性值为事件处理函数。下面是官方文档的一个例子：
$(document).ready(function(){
$('div.test').on({
'click':function(){ $(this).toggleClass('active'); },
'mouseover':function(){ $(this).addClass('test');},
'mouseout':function(){ $(this).removeClass('test');}
});
最后有一点，原先的live()方法，处理函数是默认绑定在document对象上不能变的，如果DOM嵌套结构很深，事件冒泡通过大量祖先元素会导致较大的性能损失。而使用.on()方法，事件只会绑定到$()函数的选择符表达式匹配的元素上（上面我的例子中，为了简单绑定到了document），因此可以精确地定位到页面中的一部分，而事件冒泡的开销也可以减少。delegate()与on()同理，毕竟是用on()实现的：
delegate:function(selector, types, data, fn){
return this.on（types, selector, data,fn);
}
~~examp: $('div.test').delegate('p','click',function(){ console.log(this.html());} ); //this指向p元素
转:jQuery事件绑定.on()简要概述及应用的更多相关文章
- jQuery事件绑定.on()简要概述及应用
原文地址:http://www.jquerycn.cn/a_5346 前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看 ...
- 深入学习jQuery事件绑定
× 目录 [1]bind [2]trigger [3]delegate[4]on[5]one 前面的话 javascript有HTML.DOM0级.DOM2级和IE这四种事件处理程序,而jQuery对 ...
- jQuery事件绑定、解绑、命名空间
jQuery事件绑定.解绑.命名空间 <%@ page language="java" import="java.util.*" pageEncoding ...
- jQuery 事件绑定 和 JavaScript 原生事件绑定
总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind.live.delegate.o ...
- JQuery事件绑定，bind与on区别
jquery事件绑定bind:向匹配元素添加一个或多个事件处理器 $(selector).bind("click",data,function); live:向当前或未来的匹配元素 ...
- jQuery事件绑定和委托实例
本文实例讲述了jQuery事件绑定和委托.分享给大家供大家参考.具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() . bind() . live() . delegate ...
- javascript事件委托和jQuery事件绑定on、off 和one以及on绑定多个事件(重要)
一. 事件委托什么是事件委托?用现实中的理解就是:有100 个学生同时在某天中午收到快递,但这100 个学生不可能同时站在学校门口等,那么都会委托门卫去收取,然后再逐个交给学生.而在jQuery 中, ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- 关于jQuery事件绑定
转自:http://www.cnblogs.com/gaojun/p/3497582.html html: <a href="#" onclick="addBtn( ...
随机推荐
- BZOJ 2252: [2010Beijing wc]矩阵距离
题目 2252: [2010Beijing wc]矩阵距离 Time Limit: 10 Sec Memory Limit: 256 MB Description 假设我们有矩阵,其元素值非零即1 ...
- poj 1684 Lazy Math Instructor(字符串)
题目链接:http://poj.org/problem?id=1686 思路分析:该问题为表达式求值问题,对于字母使用浮点数替换即可,因为输入中的数字只能是单个digit. 代码如下: #includ ...
- PHP批量下载方法
PHP批量下载方法 界面: $.get(“< ?php echo url::base(true);?>inventory/report/buildCsv”, //后台路径 {‘para ...
- Linux操作系统定时任务系统Cron入门、PHP计划任务以及rpc示例
一.简单介绍 1.cron是一个linux下的定时执行工具,可以在无需人工干预的情况下运行作业.由于Cron 是Linux的内置服务,但它不自动起来,可以用以下的方法启动.关闭这个服务: servic ...
- C标准中一些预定义的宏
C标准中指定了一些预定义的宏,对于编程经常会用到.下面这个表中就是一些常常用到的预定义宏. 宏(双下滑线) 意义 __DATE__ 进行预处理的日期(“Mmm dd yyyy”形式的字符串文字) __ ...
- 在mac系统安装Apache Tomcat的详细步骤（转载自himi的博客，修改了错误添加了图片）
链接地址:http://blog.csdn.net/liuyuyefz/article/details/8072485 1. 2. 3. 4. 5. 对于Apache Tomcat 估计很多童鞋都会, ...
- POJ 1743 Musical Theme（不可重叠最长重复子串）
题目链接:http://poj.org/problem?id=1743 题意:有N(1 <= N <=20000)个音符的序列来表示一首乐曲,每个音符都是1..88范围内的整数,现在要找一 ...
- 关于一个wpf中的定时器
http://www.cnblogs.com/royenhome/archive/2010/01/24/1655168.html
- Nmon的安装及使用
1.安装软件 1) 用root用户登录系统,建立目录:#mkdir /nmon 2) 通过FTP将下载的nmon工具上传至服务器 192.168.40.212目录/nmon下. 3) 修改tar包权 ...
- KVO 的使用和举例
KVO(key-value Observer),通过命名可以联想到,一个监视着监视着键值配对,让一个对象A来监视另一个对象B中的键值,一旦B中的受监视键所对应的值发生了变化,对象A会进入一个回调函数, ...