转: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( ...
随机推荐
- js导出成excel
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- [poj 3159]Candies[差分约束详解][朴素的考虑法]
题意 编号为 1..N 的人, 每人有一个数; 需要满足 dj - di <= c 求1号的数与N号的数的最大差值.(略坑: 1 一定要比 N 大的...difference...不是" ...
- sublime编辑器怎样高速输入PHP头部版本号声明
Sublime 菜单条->Tools→New Snippet→得到例如以下图内容: 输入下面内容: <snippet> <content><![CDATA[ < ...
- 通过配置Tomcat，让Android真机通过局域网访问PC的文件
在 Tomcat 根目录,找到conf\server.xml文件. 1.打开server.xml查找修改端口为8080端口: <Connector port="8080" p ...
- 转-——推荐几个web中常用的一些js图表插件 - zccst
http://www.tuicool.com/articles/bqq2Qn 作者:zccst 我自己用过fusioncharts和highchart. jQuery插件有: TufteGraph f ...
- iOS 支持arm_64 和 x86_64 的OpenSSL 静态库(libcrypto.a, libssl.a)
下载链接
- Java 日期字符串与日期类型转换
1.SimpleDateFormat.format 把日期类型转化到指定格式字符串 public static String convToString(Calendar cld,String temp ...
- 3．PHP 教程_PHP 语法
基础的PHP语法 PHP脚本可以放在文档中的任何位置. PHP脚本以<?php开始,以?>结束: <?php //PHP代码 ?> PHP文件的默认文件扩展名是". ...
- pyhton10min系列之程序员的浪漫-足迹生成器，有视频教程
记录去过的足迹 本文为原创文章 项目主页 跪求star 程序员的浪漫,我女朋友蘑菇喜欢旅游,于是我做了这个,记录2015一起去过的地方,祝她圣诞快乐 如果觉得对你有帮助,github求个star 视频 ...
- poj 3304 计算几何
大意: 是否存在一条直线,使所有线段在直线上的投影至少交与一点 思路: 转换为是否存在一条直线与所有的线段相交,做这条直线的垂线,那么垂线即为所求 **/ #include <iostream& ...