浅谈Jquery中的bind()、live()、delegate()、on()绑定事件方式
一、on(),live(),bind()
on() 为指定的元素,添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 on() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
live() 向当前或未来的匹配元素添加一个或多个事件处理器;
bind() 向匹配元素添加一个或多个事件处理器。(不能用于当前不存在的元素)
使用方式(三种均相同)
$(selector).on(event,childselector,data,function)
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).on("click",childselector,data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).on("click dbclick mouseout",childseletor,data,function);
2.利用大括号灵活定义多事件,例如 $(selector).on({event1:function, event2:function, ...},childselector);
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
childSelector: 可选;需要添加事件处理程序的元素,一般为selector的子元素;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本:jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;
二、delegate()
delegate() 为指定的元素(被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数。使用 delegate() 方法的事件处理程序适用于当前或未来的元素(比如由脚本创建的新元素)。
使用方式
$(selector).delegate(childSelector,event,data,function)
childSelector: 必需项;需要添加事件处理程序的元素,一般为selector的子元素;
event:必需项;添加到元素的一个或多个事件,例如 click,dblclick等;
单事件处理:例如 $(selector).delegate(childselector,"click",data,function);
多事件处理:1.利用空格分隔多事件,例如 $(selector).delegate(childselector,"click dbclick mouseout",data,function);
2.利用大括号灵活定义多事件,例如 $(selector).delegate(childselector,{event1:function, event2:function, ...})
3.空格相隔方式:绑定较为死板,不能给事件单独绑定函数,适合处理多个事件调用同一函数情况;
大括号替代方式:绑定较为灵活,可以给事件单独绑定函数;
data:可选;需要传递的参数;
function:必需;当绑定事件发生时,需要执行的函数;
适用Jquery版本:jquery1.4.2及其以上版本
三、四种方式异同
相同点:
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()差些;
4.bind()支持Jquery所有版本;live()支持jquery1.8-;delegate()支持jquery1.4.2+;on()支持jquery1.7+;
相关文章
- 深入理解jquery新的绑定事件机制on方法的使用
- jQuery判断checkbox,radio是否选中的3种方法
- jQuery中的事件与动画
- js/jquery 实时监听输入框值变化的完美方案:oninput & onpropertychange
- jQuery事件之鼠标事件
- 解密jQuery事件核心 - 自定义设计(三)
- 解密jQuery事件核心 - 委托设计(二)
- 50个jQuery 插件可将你的网站带到另外一个高度 - WEB开发者
- jQuery 自定义事件的学习笔记
- 主流Jquery弹出框优缺点对比
- JQuery 插件开发
- jquery事件重复绑定解决办法
- jquery移除button的inline onclick事件
- jQuery温习篇---强大的JQuery选择器
- jquery事件重复绑定解决办法
- Atitit。监听键盘上下左右方向键事件java js jquery c#.net
- js jquery手指滑动,上滑,下滑,左滑,右滑,事件监听
- jQuery UI 实例 - 自动完成(Autocomplete)
- jquery方法.serializeArray()获取name和value并转为json数组
- jQuery 事件方法大全-超全的总结
- JavaWeb——jQuery事件
- 通过jquery库扩展移动端‘长按触发’事件(模拟浏览器‘长按识别二维码’功能)