有一个奇怪的行为,当我使用命名空间事件时,处理程序总是会被触发。
<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/ 上有它
最佳答案
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"}]);
});
关于javascript 与命名空间事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19341349/