`
arz611wr
  • 浏览: 13142 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

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属性即可改变相应事件处理程序的调用
分享到:
评论

相关推荐

    jQuery事件绑定和委托实例

    本文实例讲述了jQuery事件绑定和委托。分享给大家供大家参考。具体方法如下: jQuery事件的绑定和委托可以用多种方法实现,on() 、 bind() 、 live() 、 delegate() ,还有one()。   有时我们可能会像下面这样...

    ampersand-view-jquery-events:使用jQuery在委托事件中绑定事件

    使用jQuery绑定委托事件中的事件。 用法 var $ = require ( 'jquery' ) ; var AmpersandView = require ( 'ampersand-view' ) ; var jqueryEvents = require ( 'ampsersand-view-jquery-events' ) ; FooView = ...

    jQuery 1.9.1源码分析系列(十)事件系统之绑定事件

    下面给大家介绍jquery绑定事件的方式有哪些吧。 复制代码 代码如下: jQuery.fn.eventType([[data,] fn]) 比如eventType指的是事件类型,比如click: $(“#chua”).click(fn); data这个参数一般都不会使用。这种方式...

    JQuery事件委托原理与用法实例分析

    本文实例讲述了JQuery事件委托原理与用法。分享给大家供大家参考,具体如下: 事件委托就是利用事件冒泡的原理,把事件加到父级上,通过判断事件来源的子集,执行相应的操作。事件委托首先可以极大的减少事件绑定...

    jQuery事件委托之Safari

    事件委托是Jquery中一种事件绑定的方式,不同于常见的事件绑定方式将事件绑定在目标元素上,而是将事件绑定在父级元素上通过事件冒泡来执行绑定函数。 //常见的事件绑定(Jquery) $(element).click(function(){ //...

    jquery绑定事件 bind和on的用法与区别分析

    本文实例讲述了jquery绑定事件 bind和on的用法与区别。分享给大家供大家参考,具体如下: bind和on都是给元素绑定事件用的,其最大的区别就是事件冒泡 事件冒泡也是委托事件的原型,事件委托就是子类的事情委托给父类...

    javascript事件委托的方式绑定详解

    事件绑定,这里使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能。还有一个好处...

    jquery-ui-contextmenu:jQuery插件,它将jQueryUI菜单小部件转换为上下文菜单

    支持委托(即可以绑定到上下文菜单初始化时不存在的元素)。 对触摸设备的可选支持。 状态 最新版本可在: $ npm install ui-contextmenu 另请参阅。 演示版 : 另请参阅单元测试和实时示例 更多的: 玩或 ...

    一篇一万字的jQuery事件知识总结

    文章目录事件绑定事件解绑事件冒泡什么是事件冒泡如何阻止事件冒泡默认行为什么是默认行为如何阻止默认行为jQuery事件自动触发jQuery自定义事件什么是自定义事件自定义事件满足的条件jQuery的事件命名空间什么是事件...

    jquery回到顶部demo

    所有内容放在body标签下的样式名为"body-cnt"的div中,这样将jQuery事件绑定都委托给该div,避免移动端事件绑定不到document上。

    jQuery代码优化 事件委托篇

    jQuery为绑定和委托事件提供了.bind()、.live()和.delegate()方法。本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合。 事件委托 事件委托的事例在现实当中比比皆是。比如,有三个同事预计会在...

    浅谈 jQuery 事件源码定位问题

    在一个不是自己写的页面上,如何快速定位到他绑定的事件代码在哪?(页面用的是jQuery) 这个问题,说难不难,说简单也没那么简单,万一用的是委托之类也会麻烦点。 在 chrome 的控制台里有个 Event Listeners,这里会...

    implementation-of-jQuery:jQuery的XX如何实现系列

    ###学习目的:框架+学习API +...----------------- on委托事件vol70左右【绑定两个,执行顺序有bug?】 触发器的自定义事件冒泡:events [fatherDom] ['click'] vol71 mouseenter mouseleave兼容【relateTarget】vol70

    jquery插件使用方法大全

    以前习惯在input 元素上写onclick = "fn()",使用jquery可以使javascrīpt代码与html代码分离,保持HTML的清洁,还可以很轻松地绑定事件,甚至你可以不知道“事件”这个名词。 代码 $(document).ready(function() { $...

    jQuery事件委托代码实践详解

    在需要为较多的元素绑定事件时应该使用事件委托 event delegation javascript事件传播 html如下: <body> <tr><td id=targetTd></td><td></td><td></td></tr> <tr><td></td><td></td><td></td></tr> </...

    jQuery事件绑定.on()简要概述及应用

    前几天看到事件委托的时候,关于live()方法讲的不是很详细,就去搜了一下关于live()和delegate()的,最后看源码发现bind()和delegate()都是由on()实现的,感兴趣的朋友可以了解下,或许本文对你有所帮助

    JS动态添加元素及绑定事件造成程序重复执行解决

    前言 本文主要给大家分享一下前段时间遇到的bug,这个Bug是关于jquery 的on方法绑交互事件,类似于$('#point').on('click','.read-more',function ... consol.log('jquery事件绑定') }); 第二种:  document.addEve

    jQuery中on方法使用注意事项详解

    采用事件委托机制绑定事件,好处是子元素动态加入时无需再次绑定。 on方法可以传入childSelector指定添加事件处理函数的具体子元素,还可以传入对象格式的数据data,fn函数内部通过event.data.XXX获取具体参数。传入...

    jQuery中delegate和on的用法与区别详细解析

    对于早期版本,它仍然使用事件委托的最有效手段。在事件绑定和委派,delegate()和on在一般情况下,这两种方法是等效的。 .delegate() 指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些...

Global site tag (gtag.js) - Google Analytics