JavaScript-jquery事件的奇怪写法

Question

请问一个问题，关于jquery的一个奇怪写法，我在一些jquery插件中看到的
$('body').on('click.dropdown.data-api', '.dropdown', function(){略..})
不明白的是'click.dropdown.data-api'这句，click后边居然可以这样接？？是什么意思

Answer 1

这个是jquery基于命名空间的事件机制，主要为了更简单且准确的触发事件（trigger）和移除事件（unbind）。

// 常规的事件移除如下：
$('.class').bind('click', function(){});
$('.class').unbind('click');
// 这样会移除所有的handler，如果想移除特定的handler，怎么办？

// 维持一个handler引用用来做特定的移除
function handler() { ... }
$('.class').bind('click', handler);
$('.class').unbind('click', handler);

// 基于命名空间的事件 -- 注 click是事件类型，而不是命名空间
$('.class').bind('click', function(){}); // handler1
$('.class').bind('click.namespace', function(){}); // handler2
$('.class').trigger('click.namespace'); // 触发指定的handler2
$('.class').unbind('click.namespace'); // 移除指定的handler2

// 多命名空间的情况
/* 规则：多命名空间时，jquery会先建立一个数组存放各个空间名,并进行排序(即a.b 和 b.a是同等的，如a.c.b --> [a,b,c])。当调用bind、trigger或remove时都会进行这样的操作：
bind('type.a.c.b',handler1). (命名空间为 [a,b,c])
trigger 'type.b.a' (命名空间为 [a,b]) --会触发handler1
trigger 'type.c.a' (命名空间为 [a,c]) --会触发handler1
trigger 'type.d.a' (命名空间为 [a,d]) --不会触发handler1
由此可见，只要两命名空间数组是父子集的关系，就会匹配成功，即执行对应的trigger或unbind
*/

代码示例：http://jsfiddle.net/cZSST/44/
参考：http://docs.jquery.com/Namespaced_Events

Answer 2

我倒是觉得这个的应用是配合事件代理进行某种事件的批量委托

Answer 3

比如你做了一个插件，其中有对document.click的绑定：

 $(document).on('click', function(e){...});

又有人做了一个插件，也在同一个页面使用，也绑定了同一个事件。 等到你的插件想要取消绑定的时候，如果这样操作：

 $(document).off('click');

那很明显会影响其他插件的事件。所以jquery引入了namespace的概念，这样你绑定的时候可以这样定义：

 $(document).on('click.myplugin.menu', function(e){...});

然后取消的时候这样：

 $(document).off('click.myplugin.menu');

这样就不会影响到其他的插件绑定的事件了。别被bootstrap的namespace的名字迷惑，这玩意跟data-api没关，他就是用了这个namespace。

可以看一下这块的源码：

 // Handle multiple events separated by a space
// jQuery(...).bind("mouseover mouseout", fn);
types = jQuery.trim( hoverHack(types) ).split( " " );
for ( t = 0; t < types.length; t++ ) {

tns = rtypenamespace.exec( types[t] ) || [];
type = tns[1];
namespaces = ( tns[2] || "" ).split( "." ).sort();

// If event changes its type, use the special event handlers for the changed type
special = jQuery.event.special[ type ] || {};

// If selector defined, determine special event api type, otherwise given type
type = ( selector ? special.delegateType : special.bindType ) || type;

// Update special based on newly reset type
special = jQuery.event.special[ type ] || {};

// handleObj is passed to all event handlers
handleObj = jQuery.extend({
type: type,
origType: tns[1],
data: data,
handler: handler,
guid: handler.guid,
selector: selector,
needsContext: selector && jQuery.expr.match.needsContext.test( selector ),
namespace: namespaces.join(".")
}, handleObjIn );
....

其中： ( tns[2] || "" ).split( "." ).sort(); 进行了namespace的提取操作。

Answer 4

http://docs.jquery.com/Namespaced_Events
http://api.jquery.com/on/

An event name can be qualified by event namespaces that simplify removing or triggering the event. For example, "click.myPlugin.simple" defines both the myPlugin and simple namespaces for this particular click event. A click event handler attached via that string could be removed with .off("click.myPlugin") or .off("click.simple") without disturbing other click handlers attached to the elements. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match. Namespaces beginning with an underscore are reserved for jQuery's use.

我理解的这样定义的用途是：

可以为一个Element定义N个click事件，这些事件用namespace区分，
当你需要哪个事件的时候直接trigger相应的时间即可。

例如:

bind click.a => function A()
bind click.b => function B()
bind click => function Global()
function Global()
{
if(条件 A)
{
trigger click.a
}
...
}

在QQ群里讨论了下这个问题，有人对看到 data-api 后猜测，这个代码片段可能是用于操作html中对已自定义属性的操作相关：

http://html5doctor.com/html5-custom-data-attributes/