当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: DOM树 下图仅仅是一个示例,这是一个在browser环境下的一棵模拟DOM树,在下面的代码中仅起到演示的作用: Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不…

当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效的呢? 准备知识: 当我们在开始的时候,有些知识是必须具备的: DOM树 下图仅仅是一个示例,这是一个在browser环境下的一棵模拟DOM树,在下面的代码中仅起到演示的作用: Event bubbling (aka event propagation)冒泡 我们的页面可以理解为一棵DOM树,当我们在叶子结点上做什么事情的时候(如click一个a元素),如果我们不…

复制代码 代码如下: <input id="productName" name="productName" value="" />    复制代码 代码如下: //绑定$('#productName').bind('input propertychange', function() {searchProductClassbyName();});  复制代码 代码如下: searchProductClassbyName 为触发后调用的方…

1. 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅. bind() 适用所有版本,但是根据官网解释,自从jquery1.7版本以后bind()函数推荐用on()来代替. live() jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替. delegate() 单事件处理:例如 $(selector…

最近的一项研究jQuery.利用获得的最新版本1.11.1. 据该书打下面的代码示例,,反正也发现跑不起来. html <div class="container"> <div class="box">hello world</div> </div> js $(document).ready(function() { $('.box').live('click', function() { $(this).clone(…

$(selector).bind(event,data,function) $(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替 $(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本: $(selector).on(event,childselector,…

on()来改写通过 .bind(), .live(), .delegate()所注册的事件 /* The jQuery .bind(), .live(), and .delegate() methods are just one line pass throughs to the new jQuery 1.8.2 .on() method */ // Bind $( "#members li a" ).on( "click", function( e ) {} );…

bind( )方法用于将一个处理程序附加到每个匹配元素的事件上并返回jQuery对象. .bind(eventType[, evnetData], Handler(eventObject)) 其中,参数eventType是一个字符串,包含一个或多个javaScript事件类型,例如click,submit或自定义事件的名称,指定多个事件类型时用空格分隔各个类型:eventData为Map类型,给出要传递给事件处理程序的数据,handler指定触发该事件时要执行的函数,eventObject表示事…

这几种方法都是绑定事件用到的,但是他们之间有些差别 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 例如: <ul> <a href="#"><li>1111111</li></a> <a href="#"><li>22222</li></a> <a href="#"><li>33…

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert("ok");}); live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的 $("a").live("click",function(){alert("ok");}); del…

bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert("ok");}); live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的 $("a").live("click",function(){alert("ok");}); del…

大纲: 1.bind(),live(),delegate()的含义 2.三者基于相同的原理即js的事件冒泡 3.三者相互之间的异同. bind()+live() V.S. delegate():bind()和Live()均绑定在文档元素$(document)上,而delegate则绑定到某一个具体的selector上. bind() V.S. live()+delegate():bind()是将自身的方法绑定某个元素上,当元素未在页面生成而后期又生成的话,此时bind无法生效,而live和del…

地狱的镰刀 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数. $("a").bind("click",function(){alert("ok");}); live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的 $("a").live("click",function(){alert("ok");…

实例 bind(type,[data],fn) 为每个匹配元素的特定事件绑定事件处理函数 $("a").bind("click",function(){alert("ok");}); live(type,[data],fn) 给所有匹配的元素附加一个事件处理函数,即使这个元素是以后再添加进来的 $("a").live("click",function(){alert("ok");});…

博客转载为作者:枫上善若水http://www.cnblogs.com/xilipu31/p/4105794.html 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到园友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).b…

事件(Event)是JavaScript应用跳动的心脏,通过使用JavaScript ,你可以监听特定事件的发生,并规定让某些事件发生以对这些事件做出响应 事件的基础就不重复讲解了,本来是定位源码分析实现的, 所以需要有一定的基础才行 为了下一步更好的理解内部的实现,所以首先得清楚的认识到事件接口的划分 网上资料遍地都是,但是作为一个jQuery系列的源码分析,我还是很有必要在重新总结一下 jQuery对事件的绑定分别有几个API http://www.css88.com/jqapi-1.9/…

参考:http://kb.cnblogs.com/page/94469/ 摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及防止在交互应用中弹出错误. DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任…

摘要:jQuery的.bind()..live()和.delegate()之间的区别并非总是那么明显的,然而,如果我们对所有的不同之处都有清晰的理解的话,那么这将会有助于我们编写出更加简洁的代码,以及防止在交互应用中弹出错误. 基本要素 DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. $('a').b…

jquery中有四种事件绑定函数,bind(),live(),on(),delegate(),由于live现在并不常用,因此不做过多解释. 1. bind()用法 $("div p").bind("click",function(){ alert("点击"); });同:$("div p").click(function(){ alert("点击");}); 这里为div绑定了click事件,相应为弹出内容…

前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到园友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,db…

jquery bind.delegate.live.on的区别及联系 概述 jquery提供了好几个API都可以实现事件绑定, 如 delegate, live , bind 等, 可是有没有疑惑这几个API之间有什么区别和联系呢? 其实 .delegate, .live, .on这三个都API可以事先事件绑定,只不过有一点稍微的不同点.他们属于jQuery不同时期的同一个功能的不同名称实现.如果jQ版本大于1.7,建议使用.on 可以保证向上兼容.查看jquery源码知道, jquery很多地…

jQuery最新版建议:最好用on来代替以前的bind, live, delegate,其中live是最不建议使用的. on和off的格式 on $(elements).on(events[, selector][, data],handler);//格式一 $(elements).on(eventsMap[, selector][, data]); //格式二 例如: $('#container a').on({ click: function(){ event.preventDefault(…

jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click',function (){ alert('click'); }) 解析:这种方式最简单,jq扫描文档找出所有的a,让将函数绑定到每个元素的click事件上 2.live方式 $('a').live('click',function (){ alert('click'); }) 解析:jq将函数绑定到$…

前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到园友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 $(selector).bind(event,data,function) event:必需项:添加到元素的一个或多个事件,例如 click,db…

今天看到一篇jquery 事件的文章,自己写了个小例子,虽然2种方式都可以实现,但是不太明白,找了点资料 $("#box1").delegate("p","click",function(e){//函数绑定到容器 alert(this.id) }) $("#box1 p").click(function(e){ alert(this.id) }) 博客链接 : http://www.cnblogs.com/zagelover/…

1.bind    jquery 1.3之前 定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数 语法:  bind(type,[data],function(e)); 特点: a.适合页面元素静态绑定,只能调用已经存在的元素绑定事件 b.当页面加载完后,才可以进行bind(),  所以有可能产生效率问题 $("#box").bind("click",function(e){ $(this).css({"width":"20…

啃了一段日子的js相关了,学的过程中发现在jQuery中绑定事件时,有人用bind(),有人用on(),有人用delegate(),还有人用live(),看代码的时候觉得都实现功能了也就掀过去了,只是一直没完全弄懂之间的区别,于是今天查了下资料,自己做个总结. 之所以有这么多类型的绑定方法,是因为jQuery的版本更新的原因,如on()方法就是1.7以后出现的. jQuery的事件绑定api页面上,提到live()方法已经过时,不建议使用.所以这里我们主要就看下以下三个方法: bind() de…

jquery中注册的事件,注册事件很容易理解偏差,叫法不一样.我第一反应就是如何添加事件,使用onclick之类的,暂时不讨论js注册事件的方法. 也看到园内前辈写过相关的帖子,但不是很详细,我找到了一个还算比较详细,但不支持转载无奈收藏,又担心不经常看着个强迫症.就当copy吧. jQuery中的bind(), live(), on(), delegate() 当我们试图绑定一些事件到DOM元素上的时候,我相信上面这4个方法是最常用的.而它们之间到底有什么不同呢?在什么场合下用什么方法是最有效…

bind(),live()都是调用on()函数,只不过传递的参数不同. 一.$(selector).bind(event,data,fn); $('#J_btn').bind('click',function(){ //直接绑定在指定元素上 //只能针对已经存在的元素进行事件的设置 }); 二.$(selector).live(event,data,fn); $('#J_btn').live('click',function(){ //委托,绑定在父元素上,父元素只能是document //li…

最近在AngularJS的开发中,遇到一个神奇的事情:我们用到livebox来预览评论列表中的图片, 然而评论列表是由Angular Resource动态载入的.不可思议的是,点击这些动态载入的图片仍然会触发lightbox的图片预览. 难道lightbox使用先进的MutationObserver技术监听了DOM的变化?观察lightbox源码才发现,原来只是jQuery的.on()方法: $('body').on('click', 'a[rel^=lightbox], ...', funct…