jQuery -> bind / live / delegate 的终结者 - on
Bind()方法:
给元素绑定事件
形式:
.bind(eventType[,eventData],handler(eventObject))
eventType,string类型,一个或多个DOM事件的名称,比如:click、submit
eventData,Object,将会传递给handler函数的数据,也就是eventObject的data属性中,如果要调用那么使用eventObject.data
Handler,function,当事件被触发时执行的函数
.bind(eventType[,eventData][,preventBubble])
eventType,string,一个或多个DOM事件的名称,比如:click、submit
eventData,Object,将会传递给handler函数的数据,也就是eventObject的data属性中,如果要调用那么使用eventObject.data
preventBubble,boolean,默认为true,当设置为false的时候将阻止浏览器默认事件发生,并且阻止事件冒泡。.
.bind(events)
Events,object,使用json的形式,为当前元素定义多个事件,例如:
{
click: function() {
$( this ).addClass( "active" );
},
mouseenter: function() {
$( this ).addClass( "inside" );
},
mouseleave: function() {
$( this ).removeClass( "inside" );
}
}
说明:
bind可以给当前存在的节点添加事件,即便使用标签选择器选择一类标签,但是也不能给新加的标签绑定目标时间。当只是简单的给固定的元素绑定事件时,可以使用该方法。但是如果是较为复杂的会动态添加执行事件元素的情况下,bind方法不适用。
bind中定义的evnetType,可以是任意的字符串,各个字符串用空格隔开,当该字符串是默认是DOM事件时,调用DOM事件,如果是不默认的DOM事件,那么就调用自定义事件,这些自定义事件不会被浏览器触发。但是可以通过trigger()方法手动触发。
当evnetType中包含"."的时候,.后边的字符串表示命名空间,也就是当前事件绑定在某命名空间中,那么命名空间中的事件不会影响其他事件,对于命名了解不深所以对于这块有更深的了解后再说明。
对于一个元素可以bind多个同一事件,事件触发按照绑定的顺序触发。
在handler事件中可以使用this关键词来表示触发当前事件的当前DOM对象,注意是DOM对象不是JQuery对象,要转化为JQuery对象使用$(this)。
Live()方法:
该方法已经在Jquery 1.7不推荐使用,1.9中删除。可以使用on()、delegate()方法替代。
不使用live()方法的原因:
1,live方法执行需要先通过选择器选择元素,而在大文档中,会耗费大量时间在选择特定元素的操作上。
2,live()方法不支持链接使用,例如 $( "a" ).find( ".offsite, .external" ).live(... );不能很好的工作。
3,由于所有的live()事件都附着到document对象上,事件会在执行前通过最远、最慢的传播路径。
4,移动设备上click时间不会产生冒泡,所以live()方法不会起作用。
还有其他原因。所以live事件已经被删除了。
Delegate()方法:
该方法可以基于某些特定元素(通过选择器得到),附加一个或多个事件到特定元素内部选择器指定的元素上,无论选择出的目标元素是当前存在还是将来创建。
形式:
.deletgate(selector,evnetType,handler(evnetObject))
selector,string,用来过滤触发事件的元素,即目标元素。
eventType,string,与bind中介绍的eventType一样,多个事件只用空格隔开。
Handler(eventObject),被触发的事件。
.delegate(selector,eventType,eventData,handler(eventObject))
selector,string,用来过滤触发事件的元素,即目标元素。
eventType,string,与bind中介绍的eventType一样,多个事件只用空格隔开。
eventData,Object,将会传递给handler函数的数据,也就是eventObject的data属性中,如果要调用那么使用eventObject.data
Handler(eventObject),被触发的事件。
.delegate(selector,events):
selector,string,用来过滤触发事件的元素,即目标元素。
Events,object,
使用json的形式,为当前元素定义多个事件,例如:
{
click: function() {
$( this ).addClass( "active" );
},
mouseenter: function() {
$( this ).addClass( "inside" );
},
mouseleave: function() {
$( this ).removeClass( "inside" );
}
}
说明:
在JQuery1.7之后delegate已经被on取代,在1.4-1.7之间,delegate任然是最有效的给元素绑定事件的方式。
on方法(JQuery推荐使用):
附加一个事件处理函数的一个或多个事件到选定的元素,无论选择出的目标元素是当前存在还是将来创建。
形式:
.on(events[,selector][,data],handler(evnetObject))
Events,string,事件名,可以是空格隔开的多个事件也可是带有命名空间的事件。Click submit 或 click.myPlugin
Selector,string,用来指明调用on方法的JQuery对象的特殊子元素,如果没有指定那么就是绑定到调用on方法的JQuery对象。
data,object,通过eventObject.data传递到触发事件中的数据
Handler(eventObject),被触发的函数,这里也可以使用false,false==returnfalse。
.on(events[,selector][,data])
Events,object,
使用json的形式,为当前元素定义多个事件,例如:
{
click: function() {
$( this ).addClass( "active" );
},
mouseenter: function() {
$( this ).addClass( "inside" );
},
mouseleave: function() {
$( this ).removeClass( "inside" );
}
}
Selector,string,用来指明调用on方法的JQuery对象的特殊子元素,如果没有指定那么就是绑定到调用on方法的JQuery对象
Data,object,通过eventObject.data传递到触发事件中的数据
//动态生成的元素要用这个方法
$(document).on("click", "#xxx", function() {
……
});
//非动态生成的元素还可以直接用on,但不能用live
$("#xxx").on("click", function(){
……
});
说明:
on方法是当前JQuery推荐使用的事件绑定方法,相反方法是off(),附加只运行一次就删除函数的方法是one()。
jQuery -> bind / live / delegate 的终结者 - on的更多相关文章
- jquery bind、delegate、live、on的区别及联系
jquery bind.delegate.live.on的区别及联系 概述 jquery提供了好几个API都可以实现事件绑定, 如 delegate, live , bind 等, 可是有没有疑惑这几 ...
- jQuery bind()与delegate()的区别
笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2 监听个数 .bind监听个数多——每个目标元素都需要添 ...
- jQuery -> bind / live / delegate 终结者 - on
最近的一项研究jQuery.利用获得的最新版本1.11.1. 据该书打下面的代码示例,,反正也发现跑不起来. html <div class="container"> ...
- Jquery中的bind(),live(),delegate(),on()绑定事件方式
博客转载为作者:枫上善若水http://www.cnblogs.com/xilipu31/p/4105794.html 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到d ...
- jQuery 中bind(),live(),delegate(),on() 区别(转)
当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...
- 转 jQuery 中bind(),live(),delegate(),on() 区别
当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: D ...
- jQuery 2.0.3 源码分析 事件绑定 - bind/live/delegate/on
事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析 ...
- jQuery事件绑定on()、bind()与delegate() 方法详解
jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p" ...
- 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...
随机推荐
- asp.net httpmodule 访问页面控件 备忘
用到的时候发现还得找代码,存一个例子方便自己和他人修改: using System; using System.Data; using System.Configuration; using Syst ...
- Unity Shader——Writing Surface Shaders(2)——Custom Lighting models in Surface Shaders
Surface Shader中的自定义光照模型 当你在编写 Surface Shaders 时,是在描述一个表面的属性(反射颜色.法线……),而且光的交互过程是由一个光照模型来计算的.内建的光照模型有 ...
- js反射机制
本文转载自:http://blog.csdn.net/liuzizi888/article/details/6632434 什么是反射机制反射机制指的是程序在运行时能够获取自身的信息.例如一个对象能够 ...
- Hadoop学习19--推测式执行
所谓推测式执行,就是计算框架判断,如果有一个task执行的过慢,则会启动备份任务,最终使用原任务+备份任务中执行较快task的结果.产生原因一般是程序bug.负载倾斜. 那么这个较慢,是怎么判断的呢? ...
- git 服务器的搭建
文章转载地址:http://www.linuxidc.com/Linux/2015-05/117502.htm 亲测可行,已经自己搭建一个正在使用中,搭建完成后,结合着pycharm +git,就能直 ...
- union select
union select 联合查询 ,即合并(取交集,结果中没有重复行)前后两个查询:前提是前后查询视图必须拥有相同数量的列,列也必需拥有相同的数据类型. union all select 则取的是两 ...
- 什么是BOM头,及PHP解决办法
类似WINDOWS自带的记事本等软件,在保存一个以UTF-8编码的文件时,会在文件开始的地方插入三个不可见的字符(0xEF 0xBB 0xBF,即BOM).它是一串隐藏的字符,用于让记事本等编辑器识别 ...
- JS和CSS关于大小写的区分
方法: document.getElementById("xx").style.xxx中的所有属性是什么 盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法( ...
- GTFS
Documentation The General Transit Feed Specification is documented on a Google Code site. Tables in ...
- 通过 ES6 Promise 和 jQuery Deferred 的异同学习 Promise
Deferred 和 Promise ES6 和 jQuery 都有 Deffered 和 Promise,但是略有不同.不过它们的作用可以简单的用两句话来描述 Deffered 触发 resolve ...