RSS

《jQuery in Action》 in Action - Chapter 4

Labels:

Events are where it happens!

事件处理是Javascript编程的重要一环,在jQuery之前有几种处理事件的模型:

  1. DOM Level 0 Event Model - 几乎在所有浏览器里通用,但是类似onclick的写法不符合Unobtrusive JavaScript ,同时每个元素同一类型的事件只能注册一个处理方法的限制也很致命
  2. DOM Level 2 Event Model - 解决了Unobtrusive JavaScript的问题,但是令人头痛的是每天被人诅咒的IE并不支持。(书中还讲了一遍DOM Level 2 Event Model中的capture phase 和 bubble phase值得复习一下)
jQuery的事件模型为大家解决一切烦恼: Unobtrusive JavaScript当然是原则,同时隔离了不同浏览器间的差异,使用统一的模型接口:
  1. bind(eventType,data,listener)
  2. 例: $('#vstar') .bind('click',function(event) { say('Whee once!'); })

当然大家可能一辈子也不会用到上面的方法几次,因为jQuery有更方便的快捷方法

  1. eventTypeName(listener)
  2. 例: $('#vstar') .click(function(event) { say('Whee once!'); })

另外一个bind堂兄也很有趣,让监听元素的listener只运行一次,之后就unbind掉:

  1. one(eventType,data,listener)

解除事件监听自然就是用unbind方法,第一种是解除指定的处理方法,第二种就是所有的该事件类型的方法都解除监听

  1. unbind(eventType,listener)
  2. unbind(event)

再提两个bind函数的表亲:

  1. toggle(listenerOdd,listenerEven) //监听对象的click事件,然后在listenerOdd和listenerEven之间轮流执行处理,有时候会很顺手
  2. hover(overListener,outListener) //监听对象的mouserover和mouseout事件,特殊之处在于对于当鼠标移动到监听元素内部的子元素上时,监听元素的mouseout事件不会执行,这是大多数情况下我们需要的结果,但是大多数浏览器上都正好相反,好在jQuery比较贴心

另外在这本书出版之后,jQuery在1.3版本中加入的新函数,要论起辈份来就是bind的大哥了,因为他可以把事件绑定到目前和将来所有符合某一匹配的元素:

  1. live(type, fn) //比如用live绑定了页面所有的a对象的click事件,这之后通过脚本动态插入到dom中的a对象也同样的绑定了click事件!第一次看到这个方法真的让我兴奋很久呢
  2. die(type, fn) //类似于unbind方法

jQuery的事件名称支持命名空间也是挺有趣的,看个例子就明白了:

$('#thing1').bind('click.editMode',someListener);

jQuery支持通过脚本来击发元素的各种事件,以达到让监听了这个事件的处理方法运行的目的,只是这个事件的激发不会真的模拟浏览器的dom level 2 event model中的capture phase 和 bubble phase: trigger(eventType)

最后说说listener函数中的event参数,jQuery在传递过来时做了尽可能的浏览器一致性工作,基本上写jQuery的脚本就不用担心不同的浏览器了。具体的event参数列表

p.s. jQuery in Action这本书是去年出的,俺看完了之后就懒了,只写了前三章的简介,最近无事,就把事情做完吧,但是jQuery这一年也发展了不少,比如上面提到的live函数等等,所以有翻译到过时的部分我又没发现的,就要见谅了。另外推荐jQuery的API网站,很好用 链接: 《jQuery in Action》 in action系列


0 Responses to "《jQuery in Action》 in Action - Chapter 4"

Post a Comment (友情提示:添加评论需要翻墙)