1

我遇到了一些 jQuery,它具有:

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

       --  some code  --
   }) 

控制直接来自 jQuery.min.js 以响应鼠标按下。

第一个问题是,on() 方法正在处理的包装集是什么?其次,从阅读文档来看,mousedown 之后的 .minicolors 似乎是一个“命名空间”。“mousedown”确实是这里创建的插件的名称。但是,确切地说,该命名空间在 mousedown.minicolors 中为我们做了什么?

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

谢谢

4

3 回答 3

3

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

.off('mousedown.minicolors');

否则,您还必须通过传递原始事件处理程序本身来删除事件处理程序:

var originalEventHandler = function() { ... };
el.on('mousedown', originalEventHandler)
el.off('mousedown', originalEventHandler)
于 2013-04-24T11:16:36.400 回答
1

第一个问题是,on() 方法正在处理的包装集是什么?

无论点之前是什么——你的代码片段就那之后开始,所以我们不知道。

这是委托版本,.on它为包装集中的每个元素设置一个事件处理程序.on(在委托版本中,这通常只是一个元素,因为如果有更多元素,您可以将两者替换为它们的任何共同祖先,直到和包括document)。

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

其次,从阅读文档来看,mousedown 之后的 .minicolors 似乎是一个“命名空间”。“mousedown”确实是这里创建的插件的名称。但是,确切地说,该命名空间在 mousedown.minicolors 中为我们做了什么?

实际的插件名称是minicolors; mousedown是(命名空间的)事件名称。命名空间的作用是:

  1. 它允许您区分由不同插件定义的具有相同通用名称的事件。当然,您也可以在没有命名空间抽象的情况下这样做,例如使用名为plugin1mousedownand的事件plugin2mousedown但那将是两个不同的事件。命名空间允许您“标记”事件处理程序,同时仍然引用非命名空间处理程序所引用的同一事件。
  2. 它允许您一次取消绑定同一命名空间中事件的所有事件处理程序:$whatever.off(".minicolors"). 每当插件实例被“销毁”时,这非常有用。
于 2013-04-24T11:19:28.620 回答
0

关于 .on 应用到的包装集,我现在可以看到它是 $(document)。代码是:

//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(...);

标点符号让我大吃一惊,定义所有事件处理程序似乎仍然是一种奇怪的方式,但我想它有效。

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

于 2013-04-24T14:46:11.170 回答