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

我不是只添加了特定于“click.me”的处理程序吗？

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

考虑：

$("#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：

事件名称可以由事件名称空间限定，以简化删除或触发事件。例如，"click.myPlugin.simple"定义了此特定点击事件的myPlugin和简单命名空间。

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

$("#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"}]);
});

使用命名空间事件的javascript

1 个答案: