JavaScript学习—jquery的bind-live-delegate区别
2012-06-26 11:34
162 查看
一、 事件冒泡(也称作事件传递)
点击一个链接,触发绑定在链接元素上的click事件,触发绑定到这个元素的click事件的函数。然后,这个 click 事件会从DOM树向上传递,传播到父元素,然后传递给每一个祖先元素。在DOM树中,document 是根节点。
二、 Jquery的.bind()函数
$('a').bind('click',function() { alert("That tickles!") });
JQuery的CSS选择器找到所有元素类型是‘a’的DOM对象,然后给匹配对象的 click 事件绑定处理函数。
$('a').unbind('click');
解除click事件绑定的函数。
.bind()函数使用缺陷:
1. 无法绑定处理函数到还不存在DOM元素的事件。使用$(‘a’).bind(…),之后JavaScript脚本给页面新增DOM元素,新添加元素click事件不会绑定处理函数。
2. .bind()绑定处理函数到多个元素,性能不佳,需要每个元素单独绑定。无法绑定一个父元素监听所有后代(子)元素(不用绑定100个相同的处理函数到单独的元素)。
三、 Jquery的.live()函数
$('a').live('click',function() { alert("That tickles!") });
.live()函数绑定处理函数到$(document)元素(DOM的根元素),并把事件‘click’和元素类型‘a’作为函数的参数。若有事件冒泡到document节点的时候,检查这个事件是不是 click 事件,目标元素能不能匹配‘a’,如果两个条件都是真,处理函数执行。
四、 Jquery的.delegate()函数
$('#container').delegate('a','click',function() { alert("That tickles!") });
JQuery的CSS选择器找到ID=container的对象,绑定处理函数到他的click 事件,事件‘click’和元素类型‘a’作为函数的参数。若有事件冒泡到 $(‘#container’)对象,检查事件是不是click,目标元素是不是类型为a,如果两者都符合,执行函数。
举例:
$('a').live('click',function() { blah() });
$(document).delegate('a','click',function() { blah() });
第二个方法执行效率高于第一个,因为第一个方法需要遍历整个文档($(document)元素)查找$('a')对象,并保存为jQuery对象。第二个方法只需要存贮$(document)元素,这样不需要完全载入DOM元素,就能执行后面的处理函数。
举例:
点击一个链接,触发绑定在链接元素上的click事件,触发绑定到这个元素的click事件的函数。然后,这个 click 事件会从DOM树向上传递,传播到父元素,然后传递给每一个祖先元素。在DOM树中,document 是根节点。
二、 Jquery的.bind()函数
$('a').bind('click',function() { alert("That tickles!") });
JQuery的CSS选择器找到所有元素类型是‘a’的DOM对象,然后给匹配对象的 click 事件绑定处理函数。
$('a').unbind('click');
解除click事件绑定的函数。
.bind()函数使用缺陷:
1. 无法绑定处理函数到还不存在DOM元素的事件。使用$(‘a’).bind(…),之后JavaScript脚本给页面新增DOM元素,新添加元素click事件不会绑定处理函数。
2. .bind()绑定处理函数到多个元素,性能不佳,需要每个元素单独绑定。无法绑定一个父元素监听所有后代(子)元素(不用绑定100个相同的处理函数到单独的元素)。
三、 Jquery的.live()函数
$('a').live('click',function() { alert("That tickles!") });
.live()函数绑定处理函数到$(document)元素(DOM的根元素),并把事件‘click’和元素类型‘a’作为函数的参数。若有事件冒泡到document节点的时候,检查这个事件是不是 click 事件,目标元素能不能匹配‘a’,如果两个条件都是真,处理函数执行。
四、 Jquery的.delegate()函数
$('#container').delegate('a','click',function() { alert("That tickles!") });
JQuery的CSS选择器找到ID=container的对象,绑定处理函数到他的click 事件,事件‘click’和元素类型‘a’作为函数的参数。若有事件冒泡到 $(‘#container’)对象,检查事件是不是click,目标元素是不是类型为a,如果两者都符合,执行函数。
举例:
$('a').live('click',function() { blah() });
$(document).delegate('a','click',function() { blah() });
第二个方法执行效率高于第一个,因为第一个方法需要遍历整个文档($(document)元素)查找$('a')对象,并保存为jQuery对象。第二个方法只需要存贮$(document)元素,这样不需要完全载入DOM元素,就能执行后面的处理函数。
举例:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("div").delegate("p","click",function(){ $(this).slideToggle();}); $("button").click(function(){ $("<p>这是一个新段落。</p>").insertAfter("button");}); }); </script> </head> <body> <div style="background-color:yellow"> <p>这是一个段落。</p> <p>请点击任意一个p元素,它会消失。</p> <button>在本按钮后面插入一个新的p元素</button> </div> </body> </html>
相关文章推荐
- JavaScript学习—jquery的bind-live-delegate区别
- jquery学习 - 对动态创建的元素进行事件响应(bind, live, delegate)
- jQuery中的.bind()、.live()和.delegate()之间区别分析,学习jquery
- jquery学习 - 对动态创建的元素进行事件响应(bind, live, delegate)
- 转载: jQuery事件委托( bind() \ live() \ delegate()) [委托 和 绑定的故事]
- Jquery绑定事件(bind和live的区别)
- JQuery中的bind、delegate、on、live方法的区别及简单介绍
- jquery 中的click ,bind,live,on
- javascript以及jquery的学习
- jQuery中的.bind()、.live()和.delegate()之间区别分析
- jQuery的.bind()、.live()和.delegate()之间的区别
- 【JQuery】Differences among bind(), live(), delegare, on() and one()
- [关于jQuery的事件代理] jQuery的.bind()、.live()和.delegate()之间区别
- jQuery中.bind()、.live()和.delegate()方法之间的区别
- 学习javascript并解读JQuery
- jquery中的live()和bind()方法的区别?
- 从零开始学习jQuery(剧场版) 你必须知道的javascript
- jquery 中 live事件委派 与 bind事件绑定
- jQuery四种事件绑定方式.bind(),.live(),.delegate(),on()的区别
- HTML+CSS+JavaScript+JQuery+JSP学习笔记