jQuery live( type, fn ) 委派事件实现


Posted in Javascript onOctober 11, 2009

目前支持 click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, keydown, keypress, keyup。
还不支持 blur, focus, mouseenter, mouseleave, change, submit
与bind()不同的是,live()一次只能绑定一个事件。
这个方法跟传统的bind很像,区别在于用live来绑定事件会给所有当前以及将来在页面上的元素绑定事件(使用委派的方式)。比如说,如果你给页面上所有的li用live绑定了click事件。那么当在以后增加一个li到这个页面时,对于这个新增加的li,其click事件依然可用。而无需重新给这种新增加的元素绑定事件。
.live()与流行的liveQuery插件很像,但有以下几个主要区别:
* .live 目前只支持所有事件的子集,支持列表参考上面的说明。
* .live 不支持liveQuery提供的“无事件”样式的回调函数。.live只能绑定事件处理函数。
* .live 没有"setup"和"cleanup"的过程。因为所有的事件是委派而不是直接绑定在元素上的。
要移除用live绑定的事件,请用die方法
返回值
jQuery
参数
type (String) : 一个或多个用空格分隔的事件名
fn (Function) : 欲绑定的事件处理函数
示例
点击生成的p依然据有同样的功能。
HTML 代码:
<p>Click me!</p>
jQuery 代码:

$("p").live("click", function(){ 
$(this).after("<p>Another paragraph!</p>"); 
});
Javascript 相关文章推荐
javascript 清空form表单中某种元素的值
Dec 26 Javascript
imgAreaSelect 中文文档帮助说明
Oct 08 Javascript
Extjs4 GridPanel的主要配置参数详细介绍
Apr 18 Javascript
JavaScript中Null与Undefined的区别解析
Jun 30 Javascript
jQuery页面元素动态添加后绑定事件丢失方法,非 live
Jun 16 Javascript
AngularJs $parse、$eval和$observe、$watch详解
Sep 21 Javascript
微信小程序实现图片懒加载的示例代码
Dec 13 Javascript
快速解决vue动态绑定多个class的官方实例语法无效的问题
Sep 05 Javascript
vue-cli3 从搭建到优化的详细步骤
Jan 20 Javascript
vue中使用mxgraph的方法实例代码详解
May 17 Javascript
vue中使用v-for时为什么不能用index作为key
Apr 04 Javascript
js+h5 canvas实现图片验证码
Oct 11 Javascript
修改jQuery.Autocomplete插件 支持中文输入法 避免TAB、ENTER键失效、导致表单提交
Oct 11 #Javascript
JS模拟的QQ面板上的多级可展开的菜单
Oct 10 #Javascript
js css样式操作代码(批量操作)
Oct 09 #Javascript
防止动态加载JavaScript引起的内存泄漏问题
Oct 08 #Javascript
JavaScript delete 属性的使用
Oct 08 #Javascript
有效的捕获JavaScript焦点的方法小结
Oct 08 #Javascript
Javascript isArray 数组类型检测函数
Oct 08 #Javascript
You might like
深入php中var_dump方法的使用详解
2013/06/24 PHP
php+mysql实现的二级联动菜单效果详解
2016/05/10 PHP
PHP微信分享开发详解
2017/01/14 PHP
PHP基于curl模拟post提交json数据示例
2018/06/22 PHP
PHP面向对象程序设计__tostring()和__invoke()用法分析
2019/06/12 PHP
学习ExtJS TextField常用方法
2009/10/07 Javascript
利用腾讯的ip地址库做ip物理地址定位
2010/07/24 Javascript
实现局部遮罩与关闭原理及代码
2013/02/04 Javascript
jquery拖动插件(jquery.drag)使用介绍
2013/06/18 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
jquery实现的鼠标下拉滚动置顶效果
2014/07/24 Javascript
js给selected添加options的方法
2015/05/06 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
Highcharts入门之简介
2016/08/02 Javascript
jQuery如何封装输入框插件
2016/08/19 Javascript
老生常谈JavaScript 函数表达式
2016/09/01 Javascript
React组件的三种写法总结
2017/01/12 Javascript
javascript编程实现栈的方法详解【经典数据结构】
2017/04/11 Javascript
JS非空验证及邮箱验证的实例
2017/08/11 Javascript
webpack源码之loader机制详解
2018/04/06 Javascript
Node.js进阶之核心模块https入门
2018/05/23 Javascript
详解如何从零开始搭建Express+Vue开发环境
2018/07/17 Javascript
详解ESLint在Vue中的使用小结
2018/10/15 Javascript
NodeJs实现简单的爬虫功能案例分析
2018/12/05 NodeJs
nodejs中使用archive压缩文件的实现代码
2019/11/26 NodeJs
H5 js点击按钮复制文本到粘贴板
2020/11/19 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
基于python解线性矩阵方程(numpy中的matrix类)
2019/10/21 Python
python按照list中字典的某key去重的示例代码
2020/10/13 Python
利用css3实现的简单的鼠标悬停按钮
2014/11/04 HTML / CSS
美国宠物护理专家:Revival Animal Health
2020/01/05 全球购物
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
优秀学生事迹材料
2014/02/08 职场文书
幼儿园亲子活动感想
2015/08/07 职场文书
Java 异步任务计算FutureTask
2022/04/28 Java/Android