javascript 与命名空间事件

Question

有一个奇怪的行为，当我使用命名空间事件时，处理程序总是会被触发。

<div id="div1"></div>
<span id="span1">click</span>
<span id="span2">click</span>


$("#div1").on("click.me", function(event, data){
     $(this).append(data.from);
});

$("#span1").on("click", function(event){
     $("div").trigger("click.me", [{from:"span1"}]);
});

$("#span2").on("click", function(event){
     $("div").trigger("click", [{from:"span2"}]);
});

因此，当我单击 span1 和 span2 时，div 会附加数据。这是为什么 ？我不是只添加了特定于“click.me”的处理程序吗？

我在 jsFiddle http://jsfiddle.net/cY5sk/1/ 上有它

Answer 1

Didn't I only added the handler specific to "click.me" ?

不，命名空间不是这样工作的。处理程序仍然绑定(bind)到特定事件，但命名空间为您提供了一种引用它们的额外方法。处理程序属于哪个命名空间并不重要，如果触发事件，则调用该事件的所有处理程序，无论属于哪个命名空间。

考虑:

$("#div1").on("click.me", function(event, data){
     $(this).append(data.from);
});

$("#div1").on("click", function(event, data){
     $(this).append(data.from);
});

$('div').trigger('click.me') 只会触发第一个处理程序，因为您指定了 me 命名空间。但是，$('div').trigger('click') 将触发这两个处理程序，无论其命名空间如何。

来自 documentation :

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.

<小时/>

您似乎正在寻找自定义事件，例如

$("#div1").on("foo", function(event, data){
     $(this).append(data.from);
});

$("#span1").on("click", function(event){
     $("div").trigger("foo", [{from:"span1"}]);
});

$("#span2").on("click", function(event){
     $("div").trigger("click", [{from:"span2"}]);
});