转: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 在终端中打开图形化文件管理器
虽然终端十分强大,但在少数使用终端的时候,会突然需要图形化文件管理器的帮忙. 命令: xdg-open "dir" 例如 xdg-open ./ 用图形化文件管理器打开当前文件夹 ...
- EGit with eclipse to clone project from GitHub(Step by step)
转载请注明出处! 1. To find your project URL inside GitHub: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveWF ...
- java web分享ppt大纲 －－ servlet包
概述 servlet相关代码所在包: javax.servlet javax.servlet.http 常用的功能模块 Servlet,filter,listener 常用的相关类: servlet ...
- Ubuntu 14.10 编译 qt4.8.6
0. 假设你已经可以在上面写基本的C++程序.(即:c/C++开发环境已经就绪)1. $ sudo apt-get build-dep libqt4-dev 2. $ sudo apt-get ins ...
- Lucence.Net学习+盘古分词
创建索引库 //读取文件,存储到索引库 public string CreateDatebase() { //获取索引库的路径 ...
- Python学习之字符串函数
下面是在看python核心编程中序列字符串中提到的一些函数,根据自己的学习理解总结了下,方便日后用到的时候查看. 1.string.capitalize() 把字符串的第一个字符大写 例子: ...
- [LeetCode]题解（python）：122-Best Time to Buy and Sell Stock II
题目来源: https://leetcode.com/problems/best-time-to-buy-and-sell-stock-ii/ 题意分析: 和上题类似,给定array,代表第i天物品i ...
- BootStrap学习1 输入提示
首先参考这个页面http://www.bootcss.com/javascript.html#typeahead 我只是把里面最基本的东西抠出来了 <!DOCTYPE html> < ...
- 电感耦合非接触IC卡系统的EMI问题
射频识别(RFID)技术近年来发展迅速,并获得了广泛应用.但作为一种无线射频技术,其电磁兼容(EMC)性能也越来越受到人们的关注.RFID涉及的频率范围甚广,包括低于135kHz.13.56MHz.4 ...
- 去确认CP210x UART Bridge的USB的VID和PID
[背景] 之前买的USB口的HART猫: [记录]为USB接口的HART猫ExSaf ESH232U安装对应的USB转RS232驱动 其中内部是USB转RS232. 然后打算去看看之前的自己此处的某个 ...