转: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( ...
随机推荐
- 浅析linux中的fork、vfork和clone
各种大神的混合,做个笔记. http://blog.sina.com.cn/s/blog_7598036901019fcg.html http://blog.csdn.net/kennyrose/ar ...
- m个相同苹果放的n个相同盘子中的算法
m个相同的苹果,放在n个相同的盘子中,由于相同,使用排列组合的方法不好处理.这个问题困扰了我很久 最后由大神“或缺”给出了答案: 以8个苹果放在3个盘子中为例 思路: 8苹果3盘子 =8苹果2盘子+5 ...
- MVC下载Excel
方法1: public ActionResult DownExcel() { var stream = list.Select(p => new { p.UserName, p.Mobile, ...
- LINQ的用法
http://www.cnblogs.com/liulun/archive/2013/02/26/2909985.html(转载)
- idea中使用scala运行spark出现Exception in thread "main" java.lang.NoClassDefFoundError: scala/collection/GenTraversableOnce$class
idea中使用scala运行spark出现: Exception in thread "main" java.lang.NoClassDefFoundError: scala/co ...
- LATEX使用之字体颜色深浅不一
今天用Ctex写论文,发现出来的pdf在屏幕上会出现字体颜色深浅不一的现象. google一下之后,在饮水思源bbs上找到了解决方法,用latex+dvitopdf来编译就不会有这个现象了. 另外,对 ...
- libcprops
Install Howto Download the latest epel-release rpm from http://dl.fedoraproject.org/pub/epel/6/x86_6 ...
- npm常用命令详解
~~~https://www.npmjs.org/有比较全的api文档 NPM是一个Node包管理和分发工具,已经成为了非官方的发布Node模块(包)的标准.有了NPM,可以很快的找到特定服务要使用的 ...
- COB工艺流程及基本要求
工艺流程及基本要求 清洁PCB---滴粘接胶---芯片粘贴---测试---封黑胶加热固化---测试---入库 1.清洁PCB 清洗后的PCB板仍有油污或氧化层等不洁部分用皮擦试帮定位或测试针位对擦拭的 ...
- [转]WIBKIT技术资料
WebKit结构和流程分析 http://inedx.blog.hexun.com/28830354_d.html webkit架构 http://inedx.blog.hexun.com/28795 ...