事件绑定

$(selector).bind(event,data,function)
$(selector).live(event,data,function)//jquery1.9版本以下支持,jquery1.9及其以上版本删除了此方法,jquery1.9以上版本用on()方法来代替
$(selector).delegate(childSelector,event,data,function)//jquery1.4.2及其以上版本;
$(selector).on(event,childselector,data,function)//jquery1.7及其以上版本;jquery1.7版本出现之后用于替代bind(),live()绑定事件方式;

1、.bind()
是直接绑定在元素上,也很好的解决了浏览器在事件处理中的兼容问题。如果不人为的设置stopPropagation(Moder Browser), cancelBubble(IE),那么它的所有父元素,祖宗元素都会受之影响,当我们在a 上面点击的时候,首先会触发它本身所绑定的click事件,然后会一路往上,触发它的父元素,祖先元素上所有绑定的click事件

//JQuery扫描文档找出所有的$(‘a')元素,并把alert函数绑定到每个元素的click事件上。 
$('a').bind('click', function() { alert("That tickles!") });

缺点:

  • 它会绑定事件到所有的选出来的元素上
  • 它不会绑定到在它执行完后动态添加的那些元素上
  • 当元素很多时,会出现效率问题
  • 当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题

2、.live()
则是通过冒泡的方式来绑定到元素上的。更适合列表类型的,绑定到document DOM节点上。一旦事件冒泡到document上,jQuery将会查找selector/event metadata,然后决定那个handler应该被调用。当handler在执行的时候,因为有冒泡的参与,确实会有一些延迟,但是绑定的时候是特别的快。和.bind()相比的时候有一个好处就是我们不需要在每个元素上再去绑定事件,而只在document上绑定一次就可以了。尽管这个不是最快的方式,但是确实是最少浪费的。

//JQuery把alert函数绑定到$(document)元素上,并使用'click'和'a'作为参数。任何时候///只要有事件冒泡到document节点上,它就查看该事件是否是一个click事件,以及该事件的//目标元素与'a'这一CSS选择器是否匹配,如果都是的话,则执行函数。 
//live方法还可以被绑定到具体的元素(或“context”)而不是document上
$('a').live('click',function(){alert('That tickles!')})

优点:

  • 这里仅有一次的事件绑定,绑定到document上而不像.bind()那样给所有的元素挨个绑定
  • 那些动态添加的elemtns依然可以触发那些早先绑定的事件,因为事件真正的绑定是在document上
  • 你可以在document ready之前就可以绑定那些需要的事件

缺点:

  • 从1.7开始已经不被推荐了,所以你也要开始逐步淘汰它了。
  • Chaining没有被正确的支持
  • 当使用event.stopPropagation()是没用的,因为都要到达document
  • 因为所有的selector/event都被绑定到document, 所以当我们使用matchSelector方法来选出那个事件被调用时,会非常慢
  • 当发生事件的元素在你的DOM树中很深的时候,会有performance问题

3 .delegate()

JQuery扫描文档查找$('#container'),并使用click事件和'a'这一CSS选择器作为参数把alert函数绑定到$('#container')上。任何时候只要有事件冒泡到$('#container')上,它就查看该事件是否是click事件,以及该事件的目标元素是否与CSS选择器相匹配。如果两种检查的结果都为真的话,它就执行函数。
可以注意到,这一过程与.live()类似,但是其把处理程序绑定到具体的元素而非document这一根上。精明的JS'er们可能会做出这样的结论,即$('a').live() == $(document).delegate('a'),是这样吗?嗯,不,不完全是。 delegate是更精确的小范围使用事件代理,性能优于.live()。它不会把所有的event全部绑定到document,而是由你决定把它放在哪儿。而和.live()相同的地方在于都是用event delegation.

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

优点:

  • 你可以选择你把这个事件放到那个元素上了
  • chaining被正确的支持了
  • jQuery仍然需要迭代查找所有的selector/event data来决定那个子元素来匹配,但是因为你可以决定放在那个根元素上,所以可以有效的减小你所要查找的元素。
  • 可以用在动态添加的元素上

缺点:

需要查找那个那个元素上发生了那个事件了,尽管比document少很多了,不过,你还是得浪费时间来查找。

4、.on()
则是最新的1.9版本整合了之前的三种方式的新事件绑定机制。.bind(), .live(), .delegate()都是通过.on()来实现的,.unbind(), .die(), .undelegate(),也是一样的都是通过.off()来实现的。

为什么选择.live()或.delegate()而不是.bind()

毕竟,bind看起来似乎更加的明确和直接,难道不是吗?嗯,有两个原因让我们更愿意选择delegate或live而不是bind:

  1. 为了把处理程序附加到可能还未存在于DOM中的DOM元素之上。因为bind是直接把处理程序绑定到各个元素上,它不能把处理程序绑定到还未存在于页面中的元素之上。
  2. 如果你运行了$('a').bind(…),而后新的链接经由AJAX加入到了页面中,则你的bind处理程序对于这些新加入的链接来说是无效的。而另一方面live和delegate则是被绑定到另一个祖先节点上,因此其对于任何目前或是将来存在于该祖先元素之内的元素都是有效的。
  3. 或者为了把处理程序附加到单个元素上或是一小组元素之上,监听后代元素上的事件而不是循环遍历并把同一个函数逐个附加到DOM中的100个元素上。把处理程序附加到一个(或是一小组)祖先元素上而不是直接把处理程序附加到页面中的所有元素上,这种做法带来了性能上的好处。

阻止事件的传播

$('a').bind('click',function(e){ 
e.preventDefault() 
e.stopPropagation()} 
) 

live里 要return false;
posted @ 2017-11-23 21:19  二月长安  阅读(134)  评论(0编辑  收藏  举报