jQuery事件处理方法小记

Author : lovecicy

混乱的事件处理方法理解

一直对于jQuery的多个事件绑定方法的理解很混乱,今天顺便理了一下,做个笔记。

印象中的方法有click,bind,delegate,live,on这几个,对于前3个比较熟悉,因为用的比较多,而后面两个则使用较少,基本不了解。

今天看了下官方的API,感觉click方法与bind方法其实没什么差别,只不过bind统一了绑定事件的名称,而click只是单一的绑定点击事件,对于双击事件则要使用dblclick方法。事实上,click方法其实是bind(‘click’,handler(eventObject) )的简化。

而live和delegate,其实原理是一样的,都可以用于响应动态添加的元素的事件,都通过事件冒泡实现。区别就在于live方法将事件委托给了document对象,而delegate则委托给了当前存在的祖先元素。因此两个方法的写法上也有不同:

$('a').live('click',handler(eventObject) );
$('ancestor selector').delegate('a','click',handler(eventObject) );

live方法从jQuery1.7开始就不被推荐使用,而在jQuery1.9中将其移除,所以除非你是用的是特别老的版本(1.4.2之前),别用它了。

最后一个on方法,其实可以理解为是bind和delegate的合体,从jQuery1.7开始,on方法是推荐的事件绑定方法。它的语法是这样的:

$('selector').on(events [, selector ] [, data ], handler(eventObject) )

当参数中有selector时,它相当于是delegate;当参数中没有selector时,相当于bind方法。所有的事件绑定,都可以用on方法处理,所以如果你用的是jQuery1.7以后的版本,你没有必要再用其他方法了。

总结来说,记住3个方法,bind,delegate,on。bind是对当前元素操作,delegate是对后代元素操作,on则是它们的合体。click是bind的简化,你可以理解为快捷方式。还有live呢,忘了它吧。

事件委托机制的优势

理清了多个函数的作用和关系,再来说说事件委托机制的优势。

什么是事件委托机制?就是将对子元素的事件交给父元素来处理。这样带来的好处是什么呢?

主要有两个:

一、可以处理动态添加的元素。

对于bind,你只能对当前存在的元素进行事件绑定,而对于新添加的元素,则需要重新绑定。比如:

$('#test li').bind('click',function(){
    alert('this is in bind')
})
$('#test').append('<li id="new-add">i am added after bind</li>');

点击已经存在的li,会弹出一个alert窗口。而点击新添加的li则不会弹出alert窗口,因为没有对它绑定click事件。

如果通过下面的方法进行绑定,就不一样了:

$('#test').on('click','li',function(){
    alert('this is in bind')
})
$('#test').append('<li id="new-add">i am added after bind</li>');

通过这个方式,事件是绑定在#test元素上,即使是点击新添加的li元素,事件也会通过冒泡到#test元素,以达到处理动态添加的元素的click事件的目的。

二、减少内存占用,提供系能。

看上面的例子,如果有1000个li,则需要对1000个li进行事件绑定;而第二种方式,则只需要对一个#test元素进行事件绑定,这其中的内存差距就不可忽略了,同时执行效率也相差很大,性能大大提升。

具体的例子

参考:jQuery on() APIStackOverflow

standard
  1. lucky girl - 2013 年 8 月 17 日 10:26 下午

    学习了

    回复

Have your say