前端工程师手册

jQuery事件注册和取消

jQuery毕竟是和DOM打交道最常用的库,它为我们提供了很好的兼容性保障。关于jQuery提供的事件相关方法,可以参考:event-handler-attachment

事件注册

bind

这是1.x早起版本的一种绑定方式,你看名称就比较直接。主要适用于直接绑定到已经存在的对象上,但是在1.7版本之后,推荐使用的绑定方式是on方法,原因很简单,支持事件委托嘛(I guess)! 并且jQuery自身代码中,所有与事件注册相关的操作使用的都是on方法。

还有一点需要提到的,就是通过bind绑定的事件,可以通过unbind取消。

delegate

用作事件代理代理。

live

也是用作事件代理,区别就是绑定的选择器每次都会更新。已经弃用了!

on

上面的三个方法: bind, delegate, live就是早期jQuery事件处理的主要方法,但是on出现之后,都被替换掉了。也就是说,凡事和事件打交道的时候,都要使用on,这才是老大!

one

用法和on类似,触发一次后自动取消。

off

取消事件绑定。

trigger

手动触发事件。

命名空间

使用了很久jQuery的事件绑定,才在同事那里学到可以添加命名空间这个概念。充分表明了文档的重要性,因为这个是文档里提及到的,并且就在前几段!!!

首先jQuery绑定的事件名称可以是任意String,因为可以通过trigger触发,对于不同的事件名称,可以通过添加命名空间的形式进行区分,比如click事件,我们可以添加click.namespace,也可以是click.name.space,多个命名空间并行。其实主要原因就是jQuery将每一个绑定事件对应的处理函数都存储起来了,添加命名空间,也就是对相同事件上的不同或多处事件处理函数进行区分。

这样在trigger的时候,就可以进行区分了,从而不触发其他绑定的处理函数。

事件代理

jQuery中事件流是冒泡的,也就是从触发的那个元素(event.target)开始,向document冒泡。我们可以通过event.stopPorpagation()停止冒泡。

事件代理的一大好处就是可以绑定一个元素上,检测子元素触发,而不需要绑定在N多个相同的子元素上,这样效率上会好很多。

事件对象

Event Object,jQuery的事件对象是遵守W3C标准的。关于事件对象的详细内容,参见: Event Object

传递data

jquery的绑定事件,一般都会有一个[data]参数,可以传递字符串orjson对象,然后通过事件对象event.data获取。

性能问题

事件影响我们程序效率的情况,不是那些click这样触发不频繁的事件,而是mousemove, scroll这样一分钟内会触发多次的事件,我们要在这些处理函数中,尽量减小工作量,缓存需要查询的元素,并且尽量限制触发频率。(通过setTimeout)

影响性能的另外一大原因就是事件代理了,虽然它好用,但是如果我们把所有事件都绑定在document上,那么每次都是经历一个大的遍历过程,这是消耗性能的一个问题。解决的办法就是尽量将几个可以使用事件代理的处理,找一个最近的对象进行绑定。

事件代理的选择器也是一个讲究,使用"#myForm", "a.external", "button"这类会比较快,这和css的选择器道理类似。