jQuery-事件绑定与事件委托
- 博客分类:
- 技术杂绘
jQuery中给DOM元素添加事件处理程序常用的方式:
$("#id").bind("click",function(){});
$("#id").click(function(){});
其中第一种方式如果目标Element元素在bind事件完成时不在DOM中,也就是说在bind事件完成后添加的DOM元素,则无法自动绑定事件
如果要实现自动绑定需要将bind方法替换为live方法(两个方法用法相同)
即$("#id").live("click",function(){});
附:绑定与解除
bind()->unbind()
live()->die()
例如:
$("#id").bind("click",function(){});
$("#id").unbind("click");
$("#id").live("click",function(){});
$("#id").die();
$("#id").die("click");
$("#id").die("click",function(){});
需要注意的是两个方法对应的解除绑定方法仅解除各自相应的绑定
特别的一种事件绑定方式是事件委托(或称事件代理)
写法一
$("#id").click($.proxy(context,funName);
写法二
$("#id").click($.proxy(function,context);
参数说明:
function:函数
context::定义了function属性的对象
funName:函数名称
实例:
var context={
elementClicked:function(){
alert("Clicked");
}
}
$("#id").click($.proxy(context,"elementClicked"); //第一种写法
$("#id").click($.proxy(context.elementClicked,context); //第二种写法
//只要改变context的elementClicked属性即可改变相应事件处理程序的调用
$("#id").bind("click",function(){});
$("#id").click(function(){});
其中第一种方式如果目标Element元素在bind事件完成时不在DOM中,也就是说在bind事件完成后添加的DOM元素,则无法自动绑定事件
如果要实现自动绑定需要将bind方法替换为live方法(两个方法用法相同)
即$("#id").live("click",function(){});
附:绑定与解除
bind()->unbind()
live()->die()
例如:
$("#id").bind("click",function(){});
$("#id").unbind("click");
$("#id").live("click",function(){});
$("#id").die();
$("#id").die("click");
$("#id").die("click",function(){});
需要注意的是两个方法对应的解除绑定方法仅解除各自相应的绑定
特别的一种事件绑定方式是事件委托(或称事件代理)
写法一
$("#id").click($.proxy(context,funName);
写法二
$("#id").click($.proxy(function,context);
参数说明:
function:函数
context::定义了function属性的对象
funName:函数名称
实例:
var context={
elementClicked:function(){
alert("Clicked");
}
}
$("#id").click($.proxy(context,"elementClicked"); //第一种写法
$("#id").click($.proxy(context.elementClicked,context); //第二种写法
//只要改变context的elementClicked属性即可改变相应事件处理程序的调用
发表评论
-
jQuery 获取屏幕高度
2013-12-26 01:32 541做手机Web开发做浏览器兼容用到了,所以在网上找了些汇总下。 ... -
深入分析Flex[Bindable]及使用方法
2012-01-20 01:21 423深入分析Flex[Bindable]及使用方法 2010年0 ... -
页面中嵌入FLEX应用-传参
2012-01-20 01:21 722页面中嵌入FLEX应用-传参 2010年06月29日 项 ... -
用Parsley实现Flex Ioc的简单例子
2012-01-20 01:21 660用Parsley实现Flex Ioc的简单例子 2010年0 ... -
Flex嵌入jsp开发心得
2012-01-20 01:21 504Flex嵌入jsp开发心得 2010年07月02日 PM ... -
flex与数据库交互
2012-01-20 01:21 358flex与数据库交互 2010年07月04日 Flex最 ... -
大全【极有收藏价值的】
2012-01-19 09:11 428大全【极有收藏价值的 ... -
提高小学作文实效性的思考
2012-01-19 09:11 348提高小学作文实效性的思考 2010年11月17日 摘要: ... -
小学生评语大全
2012-01-19 09:11 517小学生评语大全 2011年07月14日 你是一位可爱的小 ... -
小学生期末评语经典大全
2012-01-19 09:11 606小学生期末评语经典大全 2011年12月15日 1.你是 ... -
超级爆笑小学生作文大全,这孩子太搞了
2012-01-19 09:11 581超级爆笑小学生作文大全,这孩子太搞了 2011年11月03日 ... -
操作系统总结(除课后计算题外)
2012-01-17 01:40 721操作系统总结(除课后计算题外) 2012年01月12日 ... -
Linux基础学习 收藏
2012-01-17 01:40 628Linux基础学习 收藏 2011年06月24日 Lin ... -
2011-9-13
2012-01-17 01:40 4942011-9-13 2011年09月13日 JavaSE ... -
linux共享内存
2012-01-17 01:40 638linux共享内存 2010年07月 ... -
JAVA经典32问
2012-01-17 01:40 501JAVA经典32问 2011年12月28 ... -
系统调用、POSIX、C库、系统命令和内核函数
2012-01-15 20:55 666系统调用、POSIX、C库、 ... -
AS3容器的实现原理
2012-01-15 20:55 908AS3容器的实现原理 2010年07月09日 所谓 ... -
【顶】FLASH教程――目录
2012-01-15 20:55 710【顶】FLASH教程――目录 2009年09月15日 追 ... -
【顶】flash教程――目录
2012-01-15 20:55 707【顶】flash教程――目录 2009年09月15日 F ...
相关推荐
本文实例讲述了jQuery事件绑定和委托。分享给大家供大家参考。具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。 有时我们可能会像下面这样...
使用jQuery绑定委托事件中的事件。 用法 var $ = require ( 'jquery' ) ; var AmpersandView = require ( 'ampersand-view' ) ; var jqueryEvents = require ( 'ampsersand-view-jquery-events' ) ; FooView = ...
下面给大家介绍jquery绑定事件的方式有哪些吧。 复制代码 代码如下: jQuery.fn.eventType([[data,] fn]) 比如eventType指的是事件类型,比如click: $(“#chua”).click(fn); data这个参数一般都不会使用。这种方式...
本文实例讲述了JQuery事件委托原理与用法。分享给大家供大家参考,具体如下: 事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作。事件委托首先可以极大的减少事件绑定...
事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数。 //常见的事件绑定(Jquery) $(element).click(function(){ //...
本文实例讲述了jquery绑定事件 bind和on的用法与区别。分享给大家供大家参考,具体如下: bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类...
事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能。还有一个好处...
支持委托(即可以绑定到上下文菜单初始化时不存在的元素)。 对触摸设备的可选支持。 状态 最新版本可在: $ npm install ui-contextmenu 另请参阅。 演示版 : 另请参阅单元测试和实时示例 更多的: 玩或 ...
文章目录事件绑定事件解绑事件冒泡什么是事件冒泡如何阻止事件冒泡默认行为什么是默认行为如何阻止默认行为jQuery事件自动触发jQuery自定义事件什么是自定义事件自定义事件满足的条件jQuery的事件命名空间什么是事件...
所有内容放在body标签下的样式名为"body-cnt"的div中,这样将jQuery事件绑定都委托给该div,避免移动端事件绑定不到document上。
jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合。 事件委托 事件委托的事例在现实当中比比皆是。比如,有三个同事预计会在...
在一个不是自己写的页面上,如何快速定位到他绑定的事件代码在哪?(页面用的是jQuery) 这个问题,说难不难,说简单也没那么简单,万一用的是委托之类也会麻烦点。 在 chrome 的控制台里有个 Event Listeners,这里会...
###学习目的:框架+学习API +...----------------- on委托事件vol70左右【绑定两个,执行顺序有bug?】 触发器的自定义事件冒泡:events [fatherDom] ['click'] vol71 mouseenter mouseleave兼容【relateTarget】vol70
以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。 代码 $(document).ready(function() { $...
在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播 html如下: <body> <tr><td id=targetTd></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </...
前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看源码发现bind()和delegate()都是由on()实现的,感兴趣的朋友可以了解下,或许本文对你有所帮助
前言 本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function ... consol.log('jquery事件绑定') }); 第二种: document.addEve
采用事件委托机制绑定事件,好处是子元素动态加入时无需再次绑定。 on方法可以传入childSelector指定添加事件处理函数的具体子元素,还可以传入对象格式的数据data,fn函数内部通过event.data.XXX获取具体参数。传入...
对于早期版本,它仍然使用事件委托的最有效手段。在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。 .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些...