在jQuery1.3.3中新增加了两个新的Special.Event钩子：Add和Remove（注明一下：Hook,在计算机程序中并没有准确合理的中文翻译，这里干脆就称之为“钩子”。Hook机制就是指Action和Filter的机制）。这两个钩子不像Setup和Teardown，是要求每个事件绑定的。Add将接收处理程序（handler）、数据（data）和命名空间（namespaces）作为参数[Add(handler,data,namespaces)]。Remove仅接收数据（data）和命名空间（namespaces）作为参数[Remove(data,namespaces)]，他们将创建更复杂甚至自定义的事件。
如果你还没有使用Special.Event机制，我建议阅读Special Events的博客帖子，这里说明了Special.Event的概念以及如何使用它们。对于下面的例子我希望你是在已经理解了jQuery中Special.Event概念的前提下阅读。（Brandon Aaron补充说明）
作为一个例子我将创建一个新的Special.Event－“multiclick”。该事件将追踪一个元素的点击事件以及触发某一阈值或点击次数。这个必须的点击次数将是由一个处理程序自定义的。 首先，（看一下）这里是如何使用multiclick事件： - $('div')
- .bind("multiclick", { threshold: 5 }, function( event ) {
- alert( "Clicked 5 times" );
- })
- .bind("multiclick", { threshold: 3 }, function( event ) {
- alert( "Clicked 3 times" );
- });
现在，让我们建立它，multiclick事件的大体构架是这样的： - jQuery.event.special.multiclick = {
- add: function( handler, data, namespaces ) {
-
- },
-
- setup: function( data, namespaces ) {
-
- },
-
- remove: function( namespaces ) {
-
- },
-
- teardown: function( namespaces ) {
-
- },
-
- handler: function( event ) {
-
- }
- };
在后台，我们将需要使用正常的单击事件。我们将使用Setup Hook（安装钩子）来绑定Click事件追踪实际点击的次数。该处理方法将被用于正确地触发multiclick事件，当所有的multiclick事件将被删除，Teardown Hook（拆卸钩子）将被触发。我们使用跟踪Setup Hook中的Click来解除绑定的Click事件，以下是更新multiclick事件： - jQuery.event.special.multiclick = {
- add: function( handler, data, namespaces ) {
-
- },
-
- setup: function( data, namespaces ) {
- jQuery( this ).bind( "click", jQuery.event.special.multiclick.handler );
- },
-
- remove: function( namespaces ) {
-
- },
-
- teardown: function( namespaces ) {
- jQuery( this ).unbind( "click", jQuery.event.special.multiclick.handler );
- },
-
- handler: function( event ) {
-
- event.type = "multiclick";
-
- jQuery.event.handle.apply( this, arguments );
- }
- };
下一步，我们需要确保multiclick事件的约束函数不触发，直到它到达指定的点击次数。我们将利用这个Add Hook，这个Add Hook能够返回一个函数取代提供的处理。这是一个强大的功能，它使我们能够使用special events做各种有趣的事情。在multiclick事件中，我们会返回一个能够在指定点击次数后调用给定处理程序的新功能，这里是Add钩子： - jQuery.event.special.multiclick = {
- add: function( handler, data, namespaces ) {
-
- var threshold = data && data.threshold || 1,
-
- clicks = 0;
-
-
- return function( event ) {
-
- clicks += 1;
- if ( clicks === threshold ) {
-
- clicks = 0;
-
- handler.apply( this, arguments );
- }
- }
- },
-
- ...
- };
Add钩利用封装跟踪所需的点击次数（阈值，实际的点击数）使一次调用点击次数的处理程序被实现。jQuery事件系统让一切机智，这样，当你使用你提供绑定的同样命名的函数来解除绑定时，它仍然可以如预期地解除绑定。 最后强调的是，我们实际上并不需要为这个特殊事件使用Remove钩，所以我们只要将其删除即可。这个multiclick的特殊事件就完成了。你可以在这里看到演示,完整的代码如下： - jQuery.event.special.multiclick = {
- add: function( handler, data, namespaces ) {
-
- var threshold = data && data.threshold || 1,
-
- clicks = 0;
-
-
- return function( event ) {
-
- clicks += 1;
- if ( clicks === threshold ) {
-
- clicks = 0;
-
- handler.apply( this, arguments );
- }
- }
- },
-
- setup: function( data, namespaces ) {
- jQuery( this ).bind( "click", jQuery.event.special.multiclick.handler );
- },
-
- teardown: function( namespaces ) {
- jQuery( this ).unbind( "click", jQuery.event.special.multiclick.handler );
- },
-
- handler: function( event ) {
-
- event.type = "multiclick";
-
- jQuery.event.handle.apply( this, arguments );
- }
- };
谢谢！（感谢一下Brandon Aaron，英文能力有限，全文翻译不当之处希望指出！） 以Blog为代表的WEB2.0时代已经结束，下一个新的互联网时代正在孕酿!Social Networking Services?!下一个绝非寻常的设想即将实现… |
]2009年6月5日 16:47:14