jquery中on/delegate的原理

早期版本中叫delegate, 后来有过live函数,再后来统一用on。下面的方法等效:

    // jQuery 1.3
$(selector).(events, data, handler);
// jQuery 1.4.3+
$(elements).delegate(selector, events, data, handler);
// jQuery 1.7+ live过时 旧版本的jQuery中用户,应优先使用.delegate()来取代.live()
$(elements).on(events, selector, data, handler);

代理的好处就是动态添加的元素,之前之前绑定的事件依然有效,直接使用bind是无法在这种情况下生效的。

代理事件其实就是利用了事件冒泡机制,给父元素绑定事件,在handler中判断target是否是期望的目标元素,然后做相应的处理。

    $(document).bind('click', function(e) {
var ev = e || event;
var target = $(ev.target || ev.srcElement);
if (target.hasClass('btn')) {
console.log('xxxx: ','you clicked btn');
return false;
}
return true;
});

jquery中on/delegate的原理的更多相关文章

  1. jQuery中getJSON跨域原理详解

    详见:http://blog.yemou.net/article/query/info/tytfjhfascvhzxcytp28 jQuery中getJSON跨域原理详解 前几天我再开发一个叫 河蟹工 ...

  2. jquery 中jsonp的实现原理

    在同源策略下,在某个服务器下的页面是无法获取到该服务器以外的数据的,即一般的 ajax是不能进行跨域请求的.但 img.iframe .script等标签是个例外,这些标签可以通过 src属性请求到其 ...

  3. jquery中链式调用原理

    (1).链式调用 $("#mybtn").css("width","100px") .css("height",&quo ...

  4. 委托事件和jquery中的delegate方法

    利用事件冒泡的特性,给父元素绑定事件,然后判断事件对象,来给父元素的每个子元素添加事件,而不是直接在所有的子元素上绑定事件: <ul> <li></li> < ...

  5. jQuery 中 data 方法的实现原理

    前言:jQuery 作为前端使用最多最广泛的 JS 库,其源码每个 JSer 都应该研究一下.早就打算看却一直被各种事拖着,上次某公司面试时被问到 jQuery 中 data 方法是如何实现的,结果答 ...

  6. Jquery中的delegate()使用方法介绍

    delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数 delegate定义和用法 delegate() 方法为指定的元素(属于被选 ...

  7. 关于JQuery中$.data绑定数据原理或逻辑

    问题: JQuery中,对于.data([key],[value])函数,当使用其进行数据绑定时,假设要绑定的数据是“引用数据类型”,也就是对象:那么.data函数绑定的是该对象的副本还是该对象的一个 ...

  8. jquery中的工具方法$.isFunction, $.isArray(), $.isWindow()

    本文正式地址:http://www.xiabingbao.com/jquery/2015/07/25/jquery-judge-type 在javascript中对变量类型的判断中,我们讲解了了jqu ...

  9. Jquery中bind和live.one,delegate的区别

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

随机推荐

  1. java-并发-线程对象

    浏览以下内容前,请点击并阅读 声明 每个线程都和类Thread的实例相关,有两种基本的使用Thread对象来创建并发应用的方法: 直接控制线程的创建和管理,每次需要开始一个异步任务使简单地实例化Thr ...

  2. 【原】iOS学习之NSDate在项目中的一些类目扩展

    在项目中,我们可能会面对各种各样的对于时间的需求,在这里提供几种可能会用到的需求代码 1.与今天的时间做比较,返回日期差值 代码: - (NSInteger)compareWithToday { NS ...

  3. Java Servlet规范

    截自网址:http://blog.csdn.net/u010391029/article/details/46521051 JavaServlet Specification  Version 2.3 ...

  4. canvas小结

    前段时间在公司没什么事干,研究了一下canvas,在实际开发中还没正式应用过,但是已经深深感觉到其魅力之处.下面写一写我认为canvas中比较重要的点,如有理解错误,欢迎指正. 首先canvas是h5 ...

  5. linux下tomcat安装

    1.先安装jdk,我们这里用yum进行安装: yum -y install java-1.7.0-openjdk* 确定是否安装成功: java -version 如果显示jdk的版本信息,说明安装成 ...

  6. Torch7学习笔记(二)nn Package

    神经网络Package [目前还属于草稿版,等我整个学习玩以后会重新整理] 模块Module module定义了训练神经网络需要的所有基础方法,并且是可以序列化的抽象类. module有两种状态变量: ...

  7. *HDU 1757 矩阵乘法

    A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Ot ...

  8. unity3d中获得物体的size

    以size的x方向为例 1:gameObject.renderer.bounds.size.x;//这个值的结果真实反应出有MeshRenderer这个组件的模型的尺寸.不需要再乘以localScal ...

  9. jQuery代码节选(筛选)

    筛选...8.not()<p class="p1">1</p><p class="p2">2</p><p ...

  10. WDM驱动和NT驱动之我见

    WDM驱动是NT驱动的进化版.我个人觉得它的主要好处有两个 1.能检测到设备的插入,系统能自动分配设备的硬件信息,如中断号.IO端口.设备物理地址等 2.支持设备的开机状态拔出 之前的NT驱动和硬件关 ...