jQuery中事件绑定
一、前言
最近在做项目中要用到jQuery来绑定事件，首先想到的是$(selector).事件名();这样绑定事件的方式，这种方式对事件进行绑定其实也就是bind()方法，但当选择器匹配的元素过多，$(selector).事件名();对每个元素进行迭代绑定，会影响性能。除了这种方式可以绑定事件以外，还有live()(已过期)、delegate()、on()方法绑定事件，接下来分析一下它们的区别，以及使用哪种方式最值得推荐。由于live()方法已过期，只分析另外三种，欢迎拍砖、吐槽~~~
二、用法与区别
先准备一个example，用于不同方法绑定事件测试与对比。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>on()、delegate()、bind()事件绑定测试</title>
<link rel="stylesheet" type="text/css" href="bootstrap.css">
</head>
<body>
<div style="width:800px;margin:50px auto;">
<botton class="btn btn-success" id="btn">新增一个p元素</botton>
<p>1</p>
<p>2</p>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#btn').click(function(){
$('div').append('<p>新增一个p元素</p>');
});
});
</script>
</body>
</html>
接下来对所有的p元素绑定click事件，如：
bind()方法：为被选元素添加一个或多个事件处理程序，并规定事件发生时运行的函数。
使用方式 $(selector).bind(event,data,function)
event 必需。规定添加到元素的一个或多个事件。由空格分隔多个事件。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
$('div p').bind('click', function(){
alert($(this).text());
});
这样就为所有的p元素绑定了click事件，当点击后会弹出其内容。但有两个问题，
第一个问题，这里用了隐式迭代的方法，如果匹配到的元素特别多的时候，比如如果我在div里放了10个p元素，就得执行绑定10次。对于大量元素来说，影响到了性能。
但是如果是id选择器，因为id唯一，用bind()方法就很快捷了。
第二个问题，对于尚未存在的元素，无法绑定。点击页面上的按钮，将动态新增一个p元素，点击这个p元素，会发现没有点击响应。
bind()方法的另外一种写法是：
$('div p').click(function(){
alert($(this).text());
});
delegate()方法：为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数，使用delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式：$(selector).delegate(childSelector,event,data,function)
childSelector 必需。规定要附加事件处理程序的一个或多个子元素。
event 必需。规定附加到元素的一个或多个事件。由空格分隔多个事件值。必须是有效的事件。
data 可选。规定传递到函数的额外数据。
function 必需。规定当事件发生时运行的函数。
$('div').delegate('p', 'click', function(){
alert($(this).text());
});
delegate()方式根据事件委托的机制，不是为p元素直接绑定点击事件，而是为其父元素(或祖先元素)绑定点击事件，当点击任意p元素时，事件会一层层的冒泡，直到绑定事件的元素，在冒泡过程中事件流捕获的对象与选择器匹配时，就会执行这段alert($(this).text());代码。
所以使用delegate()方法就解决了用bind()方法的上面两个问题，不必为每个p元素绑定事件，也可以为动态新增的p元素绑定事件。虽然绑定是实现了，但是调用的时候也可能出现问题。如果事件目标在DOM树中很深的位置，这样一层层冒泡上来查找与选择器匹配的元素，又影响到性能了。
on() 方法：为指定的元素,添加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素（比如由脚本创建的新元素）。
使用方式：$(selector).on(event,childselector,data,function)
event：必需项；添加到元素的一个或多个事件，例如 click,dblclick等；
childSelector: 可选；需要添加事件处理程序的元素，一般为selector的子元素；
data：可选；需要传递的参数；
function：必需；当绑定事件发生时，需要执行的函数；
$('div').on('click', 'p', function(){
alert($(this).text());
});
on()方法的效果和delegate()方法的效果相同，通过查看jQuery源码你会发现无论bind()还是delegate()其实都是通过on()方法实现的，只是参数不同。三种方法的源码(jQuery source viewer)如下：
jQuery.fn.bind = function (types, data, fn) {
return this.on(types, null, data, fn);
};
jQuery.fn.delegate = function (selector, types, data, fn) {
return this.on(types, selector, data, fn);
};
jQuery.fn.on = function (types, selector, data, fn,one) {
var origFn, type;
// Types can be a map of types/handlers
if (typeof types === "object") {
// ( types-Object, selector, data )
if (typeof selector !== "string") {
// ( types-Object, data )
data = data || selector;
selector = undefined;
}
for (type in types) {
this.on(type, selector, data, types[type], one);
}
return this;
}
if (data == null && fn == null) {
// ( types, fn )
fn = selector;
data = selector = undefined;
} else if (fn == null) {
if (typeof selector === "string") {
// ( types, selector, fn )
fn = data;
data = undefined;
} else {
// ( types, data, fn )
fn = data;
data = selector;
selector = undefined;
}
}
if (fn === false) {
fn = returnFalse;
} else if (!fn) {
return this;
}
if (one === 1) {
origFn = fn;
fn = function (event) {
// Can use an empty set, since event contains the info
jQuery().off(event);
return origFn.apply(this, arguments);
};
// Use same guid so caller can remove using origFn
fn.guid = origFn.guid || (origFn.guid = jQuery.guid++);
}
return this.each(function () {
jQuery.event.add(this, types, fn, data, selector);
});
};
jQuery官方推荐使用on()绑定事件。
三、总结
当选择器匹配到的元素比较多时，不要用bind()迭代绑定，会影响性能；用id选择器时，可以使用bind()，简单便捷；要给动态新增的元素绑定事件时，用delegate()或on()，官方推荐使用on()。
如需转载本文，请注明来源： http://www.cnblogs.com/changjianqiu/
jQuery中事件绑定的更多相关文章
- jQuery中事件绑定到bind、live、delegate、on方法的探究
1. 给页面上的某个元素绑定事件,最初采用下面的方式实现: $(‘selector’).click(function(){ //code }); 缺点: 不能同时绑定多个事件,不能绑定动态的元素. 后 ...
- !!!jQuery中事件绑定 推荐使用.delegate()或者live()
jQuery中的.bind()..live()和.delegate()之间区别分析 参考:http://www.jb51.net/article/27309.htm DOM树 首先,可视化一个HM ...
- jq中事件绑定的方法
在唯品会实习生面试中,被面试官问了这么一个问题,“jQuery中绑定事件的方法有几个?”,以click事件为例,我当时想到的只有.click(),.bind(),.on()这三种,然后面试官又追问,“ ...
- jquery-10 jquery中的绑定事件和解绑事件的方法是什么
jquery-10 jquery中的绑定事件和解绑事件的方法是什么 一.总结 一句话总结:bind(); unbind(); one(); 1. jquery中的绑定事件和解绑事件的方法是什么? bi ...
- JS中事件绑定的三种方式
以下是搜集的在JS中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="upl ...
- python 全栈开发，Day55(jQuery的位置信息,JS的事件流的概念(重点),事件对象,jQuery的事件绑定和解绑,事件委托(事件代理))
一.jQuery的位置信息 jQuery的位置信息跟JS的client系列.offset系列.scroll系列封装好的一些简便api. 一.宽度和高度 获取宽度 .width() 描述:为匹配的元素集 ...
- Jquery中on绑定的一些小坑
---恢复内容开始--- 今天我们来说说关于JQuery中事件绑定中on绑定的一些小问题,直接上代码了,大家拷下去就可以用 <!DOCTYPE html> <html lang=&q ...
- 对jQuery的事件绑定的一些思考
jQuery的事件绑定 问题 首先我们看下面的一个非经常见的事件绑定代码: //example $('#dom').click(function(e){ //do something }); $('# ...
- JavaScript 中事件绑定的三种方式
以下是在 JS 中事件绑定的三种方式. 1. HTML onclick attribute <button type="button" id="uplo ...
随机推荐
- SPOJ PT07J - Query on a tree III(划分树)
PT07J - Query on a tree III #tree You are given a node-labeled rooted tree with n nodes. Define the ...
- POJ1251 Jungle Roads(Kruskal)(并查集）
Jungle Roads Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 23882 Accepted: 11193 De ...
- [SPOJ]COT2
题意:给一棵带点权的树,多次询问两点间路径上的不同权值数 学习了一下莫队上树(雾 先求出栈入栈序$p_{1\cdots 2n}$,记$st_x$为$x$在$p$中第一次出现的位置,$ed_x$为$x$ ...
- 【分块】bzoj1593 [Usaco2008 Feb]Hotel 旅馆
分块,记录每个块内包括左端点的最大连续白段的长度, 整个块内的最大连续白段的长度, 和包括右端点的最大连续白段的长度. Because 是区间染色,所以要打标记. 至于怎样在O(sqrt(n))的时间 ...
- ListView控件(上)数据适配器：ListView绑定监听是SetOnItemClickListener
(一) 1.效果图: 2.MainActivity.java package com.example.app5; import android.support.v7.app.AppCompatActi ...
- KEIL3中出现的字符不对齐的情况解决办法
写代码的时候我的keil3中会出现光标不对齐的情况,如下图: 看似光标在t后面,其实是在逗号后面,这是因为字体加粗导致的.解决办法: Edit->Configuration->colors ...
- <摘录>字节对齐（强制对齐以及自然对齐）
struct {}node; 32为的x86,window下VC下sizeof(node)的值为1,而linux的gcc下值为0: 一.WINDOWS下(VC--其实GCC和其原理基本一样,象这种问题 ...
- Linux中线程的挂起与恢复（进程暂停）
http://www.linuxidc.com/Linux/2013-09/90156.htm 今天在网上查了一下Linux中对进程的挂起与恢复的实现,相关资料少的可怜,大部分都是粘贴复制.也没有完整 ...
- Eclipse新建java类的时候，自动创建注释
为形成个人的java代码风格,我们在项目组中进行开发的时候,可以对自己的代码进行一些格式上面的设置,具体如下: 方法一:Eclipse中设置在创建新类时自动生成注释 windows–>prefe ...
- centos7修改yum下载源为阿里源
在国内很多yum源不好用,所以改成国内的源很有必要 首先,切换到yum源目录 cd /etc/yum.repos.d 备份一下 sudo mv CentOS-Base.repo CentOS-Base ...