Question

我遇到了一些jQuery：

  .on('mousedown.minicolors', '.minicolors-swatch', function  (event) {

       --  some code  --
   })

控件直接来自jQuery.min.js来响应mousedown。

第一个问题是on（）方法正在处理的包装集是什么？其次，mousedown之后的.minicolors似乎是一个“命名空间”，从阅读文档。 “mousedown”确实是这里创建的插件的名称。但是，在mousedown.minicolors中，该命名空间究竟为我们做了什么？

感谢您在此处添加任何清晰度？

由于

Answer 1

命名空间允许您轻松删除事件处理程序，如下所示：

.off('mousedown.minicolors');

否则你必须通过传递原始的事件处理程序来删除事件处理程序：

var originalEventHandler = function() { ... };
el.on('mousedown', originalEventHandler)
el.off('mousedown', originalEventHandler)

Answer 2

第一个问题是，on（）方法的包装集是什么工作？

无论点之前是什么 - 你的代码片段只在之后开始，所以我们都不知道。

这是.on的委托版本，它为.on的包装集中的每个元素设置一个事件处理程序（在委托版本中，这通常只是一个元素，因为如果有更多你可以用它们的任何共同祖先替换，包括document）。

此事件处理程序响应在后代上触发的任何事件，该事件与提供的选择器匹配。例如，$(document).on("click", "div.foo", ...)在document上安装一个事件处理程序，它响应对具有类foo的任何div的点击。

其次，mousedown之后的.minicolors似乎是一个＆＃34;命名空间，＆＃34;从阅读文档。＆＃34;鼠标按下＆＃34;确实是已在此处创建的插件的名称。但究竟是什么呢该命名空间在mousedown.minicolors中为我们做了什么？

实际的插件名称为minicolors; mousedown是（命名空间）事件名称。命名空间的作用是：

它允许您区分具有不同插件定义的相同通用名称的事件。当然，如果没有名称空间抽象，你也可以做到这一点。对于名为plugin1mousedown和plugin2mousedown，但的事件，这些事件将是两个不同的事件。命名空间允许您标记＆＃34;标记＆＃34;一个事件处理程序，同时仍然引用非命名空间处理程序引用的同一事件。

它允许您同时取消绑定同一命名空间中的事件的所有事件处理程序：$whatever.off(".minicolors")。每当插件实例被＆＃34;销毁＆＃34;。
时，这非常有用

Answer 3

关于.on正在应用的包装集，我现在可以看到它是$（文档）。代码是：

//Handle Events
$(document)

.on('mousedown.minicolors', '.minicolors-grid', function (event) {
              })
.on('mousedown.minicolors', '.minicolors-space', function (event) {
              })
.on('mouseover.minicolors', '.minicolors-grid', function (event) {
              })
.on('mouseover.minicolors', '.minicolors-space', function (event) {
              });

实际上是

//Handle Events
$(document).on(...).on(...).on(....).on(...);

标点符号抛弃了我，它似乎仍然是一种定义所有事件处理程序的奇怪方式，但我认为它有效。

感谢您对命名空间的解释。

on（）方法有些奇怪

3 个答案: