当前位置:首页 > 日记 > 正文

jquery中绑定事件的异同

jquery中绑定事件的异同

谈论jquery中bind(),live(),delegate(),on()绑定事件方式

1. Bind()

$(selector).bind(event,data,function)

Event:必须项;添加到元素的一个或多个事件。

Data:可选;需要传递的参数

Function:必需;当绑定事件发生时,需要执行的函数;

定义事件:

$(selector).bind({event1:function, event2:function, ...});

2.live()

$(selector).live(event,data,function)

Event:必须项;添加到元素的一个或多个事件

Data:可选;需要传递的参数

Function:必需;当绑定事件发生时,需要执行的函数;  

定义事件:

$(selector).live({event1:function, event2:function, ...}) 

3.delegate()

$(selector).delegate(childSelector,event,data,function)

childSelector:必须项;需要添加事件处理程序的元素,一般为selector的子元素;

event:必须项;添加到元素的一个或多个事件

Data:可选;需要传递的参数

Function:必需;当绑定事件发生时,需要执行的函数;

定义事件:

$(selector).delegate(childselector,{event1:function, event2:function, ...})

4.on()

$(selector).on(event,childselector,data,function)

childSelector:必须项;需要添加事件处理程序的元素,一般为selector的子元素;

event:必须项;添加到元素的一个或多个事件

Data:可选;需要传递的参数

Function:必需;当绑定事件发生时,需要执行的函数;

定义事件:

$(selector).on({event1:function, event2:function, ...},childselector); 

四种方式的异同和优缺点

相同点:

1.都支持单元多事件的绑定;空格相隔方式或者是大括号替代方式;

2.均是通过事件方式,将事件传递到document进行事件的响应;

比较:

1.bind()函数只能针对已经存在的元素进行事件的设置;但是live(),on(),delegate(),均支持未来新添加元素的事件设置;

2.bind()函数在jquery1.7版本以前比较受推崇,1.7版本出来之后,官方已经不推荐用bind(),替代函数为on(),这也是1.7版本新添加的函数,同样,可以用来代替live()函数,live()函数在1.9版本已经删除;

3.live()函数和delegate()函数两者类似,但是live()函数在执行速度,灵活性和CSS选择器支持方面较delegate()差些。

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!

相关文章

带你快速理解javascript中的事件模

带你快速理解javascript中的事件模

事件模型,带你,快速,电脑软件,javascript,javascript中有两种事件模型:DOM0,DOM2。而对于这两种的时间模型,我一直不是非常的清楚,现在通过网上查阅资料终于明白了一些。一. DOM0级事件模型DOM0级事件模型是早期的事件模型,所有的浏览器都是支…

excel 计算常数以E为底的指数函数

excel 计算常数以E为底的指数函数

教程,计算,指数函数,数以,电脑软件,  在Excel中经常需要用到公式函数进行数据统计,其中一个计算以E为底的指数函数,虽然不常用,但学到的也是自己掌握的,接下来是小编为大家带来的excel 计算常数以E为底的指数函数教程,供大家参考。excel 计算…

PHP 信号管理知识整理汇总

PHP 信号管理知识整理汇总

信号,管理知识,电脑软件,PHP,SIGQUIT 建立CORE文件终止进程,并且生成core文件SIGILL 建立CORE文件 非法指令SIGTRAP 建立CORE文件 跟踪自陷SIGBUS 建立CORE文件 总线错误SIGSEGV 建立CORE文件 段…

Jquery中.bind | 、.live | 、.del

Jquery中.bind | 、.live | 、.del

详解,区别,电脑软件,bind,Jquery,简介最近了解到很多网页开发者对jquery中的 .bind() .live() .delegate() 和 .on() 方法存在很多的疑惑。这些疑惑通常是关于它们之间真正的区别是什么啊,什么时候该使用它们啊。下面本文将给大家详细介绍这…

cdr怎么给制作水彩画效果?

cdr怎么给制作水彩画效果?

水彩画,效果,电脑软件,cdr,cdr中想要制作水彩画效果的图片,该怎么制作呢?下面我们就来看看详细的教程。软件名称:CorelDRAW X6 官方简体中文精简绿色便携版软件大小:176MB更新时间:2016-03-181、打开CorelDRAW软件,新建一个空白的文件,鼠标左键单…

怎么在Excel表格设置有效的的日期

怎么在Excel表格设置有效的的日期

日期,输入,设置,表格,电脑软件,  在excel表格中输入指定的日期,为了防止输入错误的日期,我们可以给表格设置输入范围。以下是小编为您带来的关于Excel表格设置有效的的日期输入范围,希望对您有所帮助。Excel表格设置有效的的日期输入范围1、…

微信小程序点击控件修改样式实例详

微信小程序点击控件修改样式实例详

控件,修改,详解,样式,实例,微信小程序点击控件修改样式实例详解现在要在微信小程序中实现点击控件修改样式,如下:微信小程序中不支持直接操作dom,要实现这种效果,我们需要通过设置data,然后利用数据和界面的双向绑定来实现它。第一步:在wxss中定…

Node.js dgram模块实现UDP通信示例

Node.js dgram模块实现UDP通信示例

示例代码,模块,电脑软件,js,Node,1、什么是UDP?这里简单介绍下,UDP,即用户数据报协议,一种面向无连接的传输层协议,提供不可靠的消息传送服务。UDP协议使用端口号为不同的应用保留其各自的数据传输通道,这一点非常重要。与TCP相比,占用资源更少,传…

Photoshop CC 2018内置滤镜camera

Photoshop CC 2018内置滤镜camera

分享,滤镜,一键,技巧,电脑软件,今天给大家分享使用Photoshop CC 2018的内置滤镜camera raw一键磨皮小技巧,它的速度非常非常快,可以说真正的有效步骤只有一步,适用于对于非商业用途、不要求太多细节的图片,效果还是很棒的。这个分享涉及到camer…

ppt2010有布尔运算吗

ppt2010有布尔运算吗

布尔运算,方法,绘制图形,电脑软件,  图形的布尔运算,说白了就是图形之间的加、减法。在其他图形处理软件中布尔运算很常见,但是ppt中暂时还没有把图形的布尔运算放在菜单中。下面给大家分享PPT2010绘制图形布尔运算的方法,欢迎大家来到学习…

解决安装WampServer时提示缺少msvc

解决安装WampServer时提示缺少msvc

提示,文件,安装,电脑软件,WampServer,今天开始学习PHP,对于初学者来说,我们一定希望从简单的开始,所以,从集成环境非常好的WampServer的安装开始.1、下载WampServer安装程序,安装完毕后会出现一个错误.如下:2、这是因为你的电脑缺少c++环境。你…

vue-resource 拦截器使用详解

vue-resource 拦截器使用详解

拦截器,详解,电脑软件,vue,resource,在vue项目使用vue-resource的过程中,临时增加了一个需求,需要在任何一个页面任何一次http请求,增加对token过期的判断,如果token已过期,需要跳转至登录页面。如果要在每个页面中的http请求操作中添加一次判断…