jQuery事件函数bind,live,delegate的区别

【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()之间区别分析

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事件：bind、delegate、on的区别

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

转载： jQuery事件委托( bind() \ live() \ delegate()) [委托和绑定的故事]

转载:http://blog.csdn.net/zc2087/article/details/7287429 随着DOM结构的复杂化和Ajax等动态脚本技术的运用,事件委托自然浮出了水面.jQuery为绑定和委托事件提供了.bind()..live()和.delegate()方法.本文在讨论这几个方法内部实现的基础上,展示它们的优劣势及适用场合. 事件委托事件委托的事例在现实当中比比皆是.比如,有三个同事预计会在周一收到快递.为签收快递,有两种办法:一是三个人在公司门口等快递:二是委托给前台M…

jQuery bind()与delegate()的区别

笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2 监听个数 .bind监听个数多——每个目标元素都需要添加 .delegate监听个数少——只给父元素添加一个 3 新增子元素自动获得时间处理函数: .bind只能对现有元素添加事件监听,新增元素无法自动获得监听 .delegate只要父元素下的元素,无论现有还是新增,都能自动获得监听…

jQuery事件函数位置放置的两种方法

jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法. 通常会把 jQuery 代码放到 <head>部分的事件处理方法中: 实例 <html> <head> <script type="text/javascript" src="jquery.js"></script> <script type="…

松软科技课堂:jQuery 事件函数

jQuery 事件函数 jQuery 事件处理方法是 jQuery 中的核心函数. 事件处理程序指的是当 HTML 中发生某些事件时所调用的方法.术语由事件“触发”(或“激发”)经常会被使用. 通常会把 jQuery 代码放到 <head>部分的事件处理方法中: 实例 <html> <head> <script type="text/javascript" src="jquery.js"></script>…

jquery实现input输入框实时输入触发事件代码 ---jQuery 中bind(),live(),delegate(),on() 区别

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

jQuery 中bind(),live(),delegate(),on() 区别(转)

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

转 jQuery 中bind(),live(),delegate(),on() 区别

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