jquery - jQuery 中的命名空间函数

Question

这两段代码有什么区别？两者都工作得很好，那么为什么在函数中使用 .dropdown.data-api 呢？我在互联网上读到了有关命名空间的信息，但我对此并不清楚。谁能告诉我命名空间函数有什么用？

$('html').on('click.dropdown.data-api',
  function () {
    $el.parent().removeClass('open')
  })
}

$('html').on('click',
  function () {
    $el.parent().removeClass('open')
  })
}

Answer 1

如果您希望解除绑定(bind)或触发特定事件，则通过为事件命名可以定位特定事件。

假设您有两个相同类型的事件绑定(bind)到相同的元素。

$('.something').on('click', function() { /* do something */ });
$('.something').on('click', function() { /* do something else */ });

由于我们没有为任一事件命名，因此现在很难解除绑定(bind)或触发其中一个事件，但无法触发另一个事件。现在考虑:

$('.something').on('click.one', function() { /* do something */ });
$('.something').on('click.two', function() { /* do something else */ });

因为这次每个事件都有自己的命名空间，所以我们现在可以触发或取消绑定(bind)其中一个，而另一个保持不变。

$('.something').off('click.one'); //unbind the 'one' click event
$('.something').trigger('click.two'); //simulate the 'two' click event

[编辑 - 正如 @jfrej 在下面指出的那样，命名空间意味着您有时甚至不需要引用事件类型名称。因此，如果您在单个命名空间上同时发生了鼠标悬停和单击事件，则可以使用 off('.namespace') 取消两者的绑定(bind)。]