深入理解jQuery中live与bind方法的区别

注意如果是通过jq添加的层和对象一定要用live（），用其他的都不起作用

live的缺点就是，运行完以后不释放空间，太多的使用会占用更多的内存，bind（）则点击完以后释放空间

区别一：

Click here

可以给这个元素绑定一个简单的click事件：

$('.clickme').bind('click', function() {
$('body').append('

Another target
');
});

当点击了元素，就会弹出一个警告框。然后，想象一下这之后有另一个元素添加进来了。

尽管这个新的元素也能够匹配选择器 ".clickme" ，但是由于这个元素是在调用 .bind() 之后添加的，所以点击这个元素不会有任何效果。

.live() 就提供了对应这种情况的方法。如果我们是这样绑定click事件的：

$('.clickme').live('click', function() {
alert("Live handler called.");
});

然后再添加一个新元素：

$('body').append('

Another target
');

然后再点击新增的元素，他依然能够触发事件处理函数。

区别二：

（1）bind方法可以绑定任何JavaScript的事件，而live方法在jQuery1.3的时候只支持click, dblclick, keydown, keypress,keyup,mousedown, mousemove, mouseout, mouseover, 和 mouseup.在jQuery 1.4.1中，甚至也支持 focus 和 blue事件了（映射到更合适，并且可以冒泡的focusin和focusout上）。另外，在jQuery 1.4.1中，也能支持hover（映射到"mouseenter mouseleave"）。

（2）live() 并不完全支持通过DOM遍历的方法找到的元素。取而代之的是，应当总是在一个选择器后面直接使用 .live()方法。

（3）当一个元素采用live方法进行事件的绑定的时候，如果想阻止事件的传递或冒泡，就要在函数中return false,仅仅调用stopPropagation()是无法实现阻止事件的传递或者冒泡的

赞 (0)

相关推荐

  • jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解

    本文实例分析了jQuery中bind(),live(),delegate(),on()绑定事件方法.分享给大家供大家参考,具体如下: 前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能帮助到各位朋友,文中如有不当之处,还望各位指正,话不多说,直接进入正题. 一.bind() 简要描述 bind()向匹配元素添加一个或多个事件处理器. 使用方式 复制

  • jQuery事件绑定用法详解(附bind和live的区别)

    本文实例分析了jQuery事件绑定用法.分享给大家供大家参考,具体如下: html: <a href="#" onclick="addBtn()">addBtn</a> <div id="mDiv"> <button class="cBtn" onclick="alert(11111)">button1</button> <button cl

  • jQuery中的.bind()、.live()和.delegate()之间区别分析

    jQuery中的.bind()、.live()和.delegate()之间区别分析

    DOM树 首先,可视化一个HMTL文档的DOM树是很有帮助的.一个简单的HTML页面看起来就像是这个样子: 事件冒泡(又称事件传播) 当我们点击一个链接时,其触发了链接元素的单击事件,该事件则引发任何我们已绑定到该元素的单击事件上的函数的执行. 复制代码 代码如下: $('a').bind('click',function(){alert('that tickles!')}) 因此一个单击操作会触发alert函数的执行. click事件接着会向树的根方向传播,广播到父元素,然后接着是每个祖先元素

  • jQuery中bind,live,delegate与one方法的用法及区别解析

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

  • 解析jQuery的三种bind/One/Live事件绑定使用方法

    jQuery是 一款优秀的JavaScript框架,在旧版里主要用bind()方法,在新版里又多了两种One(),Live(),下面介绍这几种方法的使用: 1. bind/Unbind在jquery的事件模型中,有两个基本的事件绑 定函数,bind与unbind,这两个函数的含义就是匹配页面元素进行相关事件的处理.比如我们在JS中经常使用到的 onfocus,onblur,onmouseover,onmousedown等事件都可以作为bind的参数进行传递. $("#id").bind

  • jQuery中对未来的元素绑定事件用bind、live or on

    对未来的元素绑定事件不能用bind, 1.可以用live代替,但是要注意jquery的版本,根据官方文档,从1.7开始就不推荐live和delegate了,1.9里就去掉live了. 2.推荐用on代替(注:1.7及以上的版本才支持).用法:on(events,[selector],[data],fn) 复制代码 代码如下: //放在$(function(){})里才有效 $(document).on("click", "#testDiv", function(){

  • jquery中live()方法和bind()方法区别分析

    本文实例讲述了jquery中live()方法和bind()方法区别.分享给大家供大家参考,具体如下: live()不受加载时间顺序的影响,只要查找能够配对上就能够绑定对应的事件,而bind方法只有在第一次被加载的时候才绑定时间,如果代码之后再加载配对的元素,则不能绑定对应的事件 $("#manual_disconnect").live("click", function(){ connectionProfile("0"); }); $("

  • Jquery绑定事件(bind和live的区别介绍)

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

  • jQuery中bind与live的用法及区别小结

    首先介绍这两个方法之前,我们常用的是click()方法 复制代码 代码如下: $("a").click(function() {     alert("hello");}); click()方法是bind()方法的一种简单方法.在bind()中,jQuery所有JavaScript事件对象,比如focus, mouseover,和resize,都是可以作为type参数传递进来的. 参数:type,[data],function(eventObject)例如: 复制代

  • 深入理解jQuery中live与bind方法的区别

    注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 live的缺点就是,运行完以后不释放空间,太多的使用会占用更多的内存,bind()则点击完以后释放空间 区别一: Click here 可以给这个元素绑定一个简单的click事件: $('.clickme').bind('click', function() {$('body').append(' Another target');}); 当点击了元素,就会弹出一个警告框.然后,想象一下这之后有另一个元素添加进来了. 尽管

  • 关于jquery中attr()和prop()方法的区别

    关于jquery中attr()和prop()方法的区别

    最近项目回归使用jquery,页面渲染全是使用jquery做的,所以做的时候也遇到了许多以前没有见过的问题,如这次操作[radio]控件的"checked"属性时有遇到问题, $("...").attr("checked",false);无法起到作用,上网查了下使用prop()完美的解决了该问题,特此记录一下. 官方定义:attr(): attr() 方法设置或返回被选元素的属性和值. 当该方法用于返回属性值,则返回第一个匹配元素的值. 当该方法

  • 深入理解JavaScript中的call、apply、bind方法的区别

    深入理解JavaScript中的call、apply、bind方法的区别

    在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部 this 的指向,因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念 apply.call apply:应用某一对象的一个方法,用另一个对象替换当前对象 call:调用一个对象的一个方法,以另一个对象替换当前对象 function pers

  • 深入理解jQuery中的事件冒泡

    深入理解jQuery中的事件冒泡

    1.什么是冒泡 eg: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>事件冒泡</title> <script src="

  • 深入理解JQuery中的事件与动画

    首先,使用JQuery事件与动画的效果比使用原生js来的方便得多,当然,最重要的是考虑到了浏览器的兼容性. 事件: 基于原生js,常用事件有blur,focus,hover,mouseout,mouseover,mouseleave,ready,change,select,submit等等,不再赘述. 事件绑定: 在文档加载完成后,使用bind(type,[data],func())方法绑定事件. 合成事件: hover(enter-func,leave-func)相当于bind("mouseo

  • jQuery中trigger()与bind()用法分析

    本文实例讲述了jQuery中 trigger()与bind()用法.分享给大家供大家参考,具体如下: trigger(type) 在每一个匹配的元素上触发某类事件. 返回值:jQuery 参数: type (String): 要触发的事件类型 示例: 复制代码 代码如下: $("p").trigger("click") 1.trigger() 触发事件 这个方法是jQuery 1.3中新增的一个引起触发事件的函数. 这里的事件就如jQuery的帮助文档中的事件那一栏

  • jQuery中ajax的get()方法用法实例

    本文实例讲述了jQuery中ajax的get()方法用法.分享给大家供大家参考.具体分析如下: $.get()通过 HTTP GET请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.get(url, [data], [callback], [type]); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,待发送 Key/value 参数. 3.callback:可选,请求成功后所执行的回调函数. 4.type:可选,返回内容格式,xml, html, scri

  • jQuery中ajax的load()方法用法实例

    本文实例讲述了jQuery中ajax的load()方法用法.分享给大家供大家参考.具体分析如下: 此函数jQuery中简单而功能强大的ajax方法. 它可以从服务器加载内容,然后写入匹配元素. 语法结构: 复制代码 代码如下: $(selector).load(URL,data,callback); 参数解析: 1.selector:一个选择器,可以将内容加载到此选择器匹配的元素中. 2.URL:必须,需要加载的一个url地址. 3.data:可选,与请求一同发送的查询字符串键/值对集合. 4.

  • jQuery中ajax的post()方法用法实例

    本文实例讲述了jQuery中ajax的post()方法用法.分享给大家供大家参考.具体分析如下: $.post() 方法通过HTTP POST请求从服务器上请求数据. 语法结构: 复制代码 代码如下: $.post(URL,data,callback); 参数解析: 1.URL:必须,规定请求的URL. 2.data:可选,规定连同请求发送的数据. 3.callback:可选,规定请求成功后所执行的函数名. 代码实例: 复制代码 代码如下: <!DOCTYPE html> <html&g

  • 深入理解关于javascript中apply()和call()方法的区别

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的"偏见",因为这对您来说绝对是一片新大陆,让JavaScrip慢慢融化以前一套凝固的编程意识,注入新的生机! 好,言归正传,先理解JavaScrtipt动态变换运行时上下文特性,这种特性主要就体现在apply, call两个方法的运用上.

随机推荐