Jquery 日记一:bing live delegate三个绑定事件操作的区别 ！

$(document).bind("click",fn);
//或者
$(document).click(fn);

和

$('a').live('click', function() { alert("That tickles!") });
//最完美的live绑定如下:
//live方法还可以被绑定到具体的元素(或context)而不是document上，像这样
$('a', $('#container')[0]).live(...);

例子:执行上面例子的时候,直接给指定的document元素绑定了click事件,但是在unbind移除的时候出现了问题,把原有其他组件用live这种方式绑定的click事件也unbing的了(因为document有别的click事件).

原理如下,live事件是把要执行的函数function和参数a都绑定到document上,有事件冒泡到document上的时候会去判断是否有个事件叫click以及是否有一个参数叫a,这样才执行,所以$(document)unbind的时候会移除掉所有的click事件,这样会移除掉我们并不想移除掉的事件,多移除了事件!~

由此,衍生出来上面的问题后,我得到了这两个函数的区别并去尝试学习了一个新的函数delegate.

$('#container').delegate('a', 'click', function() { alert("That tickles!") });

别人总结得很好,我就照原话抄了,基本就是精确绑定到了元素上,原理看下面:

JQuery扫描文档查找$(‘#container’)，并使用click事件和’a’这一CSS选择器作为参数把alert函数绑定到$(‘#container’)上。任何时候只要有事件冒泡到$(‘#container’)上，它就查看该事件是否是click事件，以及该事件的目标元素是否与CCS选择器相匹配。如果两种检查的结果都为真的话，它就执行函数。

这样子的话,三个函数的基本原理就阐述清楚了,但是这些方法在使用过程中的时候应关注一下几点:

1.事件冒泡.　　e.preventDefault(); .stopPropagation(); 可以阻止事件冒泡

2.总结:bind把函数绑定元素的click事件上,live可以动态绑定(后面再加入一个同样的标签就可以),delegate和live一样可以绑定未来元素