JavaScript 打开与命名空间事件

javascript on with namespacing events

本文关键字：命名空间 事件 JavaScript      更新时间：2023-09-26

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

<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/

我不是只添加了特定于"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')将触发这两个处理程序，无论其命名空间如何。

从文档中：

事件

名称可以由事件命名空间限定，从而简化事件的删除或触发。例如，"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"}]);
});
相关文章：