【转】jQuery中bind,live,delegate,on绑定事件的方式与区别
jQuery中提供了四种事件监听方式,分别是bind、live、delegate、on,对应的解除监听的函数分别是unbind、die、undelegate、off。
已知有4个列表元素:
列表元素1
列表元素2
列表元素3
列表元素4
1、bind
bind(type,[data],function(eventObject))
bind是使用频率较高的一种,作用就是在选择到的元素上绑定特定事件类型的监听函数,参数的含义如下:
type:事件类型,如click、change、mouseover等;
data:传入监听函数的参数,通过event.data取到。可选;
function:监听函数,可传入event对象,这里的event是jQuery封装的event对象,与原生的event对象有区别,使用时需要注意。
源码:
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
}
可以看到内部是调用了on方法。
bind的特点就是会把监听器绑定到目标元素上,有一个绑一个,在页面上的元素不会动态添加的时候使用它没什么问题。但如果列表中动态增加一个“列表元素5”,点击它是没有反应的,必须再bind一次才行。
2、live
live(type, [data], fn)
live的参数和bind一样,它又有什么蹊跷呢,我们还是先瞄一眼源码:
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
}
可以看到live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。
live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document。
使用事件委托的优点一目了然,新添加的元素不必再绑定一次监听器。
3、delegate
将监听事件绑定在就近的父级元素上,源码:
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
}
这下,我们的选择又多了一些灵活性,不单可以利用事件委托,还可以选择委托的对象。毕竟老麻烦同一个人帮忙很不好嘛。对于如何选择委托对象,还是需要一定的策略的,毕竟父级元素可以有很多。我觉得原则应该是选择最近的“稳定”元素,选择最近是因为事件可以更快的冒泡上去,能够在第一时间进行处理。所谓“稳定”是指该父级元素是一开始就在页面上的,不是动态添加上来的,而且将来也不会消失掉,这样可以保证它可以时时监控着自己的孩子。
4、on
on(type,[selector],[data],fn)
参数与delegate差不多但还是有细微的差别,首先type与selector换位置了,其次selector变为了可选项。
$('#myol li').on('click',getHtml);
可以看到event.currentTarget是li自己,与bind的效果一样。至于传selector进去,就是跟delegate一样的意义了,除了参数顺序不同,其他完全一样。
垂直居中-父元素高度确定的多行文本(方法二)
去掉WIN7 桌面图标的小箭头
搭建高可用mongodb集群(三)—— 深入副本集内部机制
搭建高可用mongodb集群(二)—— 副本集
搭建高可用mongodb集群(一)——配置mongodb
Linux:Tomcat报错: Error creating bean with name 'mapScheduler' defined in ServletContext resource 的解决方法
LINUX ORACLE 启动与关闭
Linux 安装 Oracle 11g R2
ORACLE 数据库优化原则
- 最新文章
-
How to get URL parameters with Javascript?
Solve: Your project references the latest version of Entity Framework (for MySQL) in Visual Studio 2013
How to get the Current Controller Name, Action, or ID in ASP.NET MVC
301 redirect Domain Name using global.asax
adding validation annotators to model classes 在linq to EntityFrame的Model中添加前台验证validation annotators
Visual Studio 新建项目报错" this template attempted to load component assembly 'NuGet.VisualStudio.Interop, ….".
System.Net.WebException : The remote server returned an error: (415) UNSUPPORTED MEDIA TYPE
LINQ TO ENTITY 根据Birthday获取Age
Entity Framework 在Vs2012下Update Model From DataBase 失败的问题
ASP.NET 4.0 forms authentication issues with IE11
- 热门文章
-
ASP.NET 4.0 potentially dangerous Request.Form value was detected
mysql 找不到或无法加载已注册的 .Net Framework Data Provider和Unable to find the requested .Net Framework Data Provider. It may not be installed解决
iOS 获取URL中的参数
Constant is not finite! That's illegal. constant:inf'
iOS 去除导航栏下的黑线
iOS Instruments之Core Animation动画性能调优(工具复选框选项介绍)
解决Undefined symbols for architecture x86_64: 报错 和 ld: warning: ld: warning: ignoring file警告
An App ID with Identifier 'xxxxxx’ is not available. Please ....
解决ld: warning: directory not found for option警告
iOS9 application:application openURL: sourceApplication: annotation: 方法不执行