javascript - Jquery 函数处理程序复杂

Question

这个问题已经有答案了:

This appears to be a class on a Javascript event. What is it? (2 个回答)

已关闭 8 年前。

我只是在查看button.js的源代码，发现了以下代码片段:

$(document).on('click.bs.button.data-api', '[data-toggle^="button"]', function (e) {
    var $btn = $(e.target)
    if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
    Plugin.call($btn, 'toggle')
    e.preventDefault()
  })

我对 Jquery 并不陌生，但我是一个初学者，现在我了解了 on() 函数在 Jquery 中的工作原理。

我对上面这段代码的问题是，我不太明白附加到 on() 函数的事件，让我解释一下:

$(document).on('click.bs.button.data-api'

我不太明白这个事件是什么:

click.bs.button.data-api

在普通的 Jquery 代码中，我通常会看到如下内容:

$('body').on('click' , '.btn' , function(e){
     // do something
});

但是这个处理程序完全让我摆脱了困境，有人可以解释一下该代码的作者通过添加该处理程序到底实现了什么吗？

这是插件 git 存储库上的链接:Line 106

Answer 1

这是一个事件命名空间。

根据 .on() 上的 jQuery 文档:

An event name can be qualified by event namespaces that simplifyremoving or triggering the event. For example, "click.myPlugin.simple"defines both the myPlugin and simple namespaces for this particularclick event. A click event handler attached via that string could beremoved with .off("click.myPlugin") or .off("click.simple") withoutdisturbing other click handlers attached to the elements. Namespacesare similar to CSS classes in that they are not hierarchical; only onename needs to match. Namespaces beginning with an underscore arereserved for jQuery's use.