您的位置:首页 > Web前端 > JQuery

事件委托在jQuery和KISSY内核中的应用

2011-07-19 11:01 232 查看
一直觉得jQuery中的 .live() 方法很神奇,居然可以对动态加入的元素进行绑定。今天终于弄明白了,原来这是通过使用事件委托实现的。

$('a').live('click', function(){
//code block1货运专家
})

上面的这段代码可以约等于(但不完全等于,在最后说明了为什么):

$(document).bind('click', function(e){
if(e.srcElement.tagName == 'a'){
//code block1
}
})

此外,jQuery还有一个 .delegate() 方法,可以实现接近 .live() 的效果:

$('#container').delegate('a','click',function(){
//code block2
})

jQuery在文档中查找#container,并使用click事件和’a'这一CSS选择器作为参数,把函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话,它就执行绑定的函数。tp-link
在KISSY 1.2版本中也引入了 .delegate() 方法。
这两种方法中,个人觉得还是 .delegate() 方法效率高。因为 .live() 方法需要把选择器匹配到的元素都包装成jQuery对象;而 .delegate() 方法只在委托的节点上监听冒泡事件。感觉用 .live() 方法进行事件委托比较鸡肋啊,可能这也是为什么其他js框架没有类似方法的原因吧。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: