What does click.modal.data-api as event name mean? [duplicate]

Question

I was reading through Bootstraps JavaScript and noticed the following code:

$(document).on('click.modal.data-api', '[data-toggle="modal"]', function (e) {
    //do something
});

Can someone explain to me why it is "click.modal.data-api". What does the dot after the event do? Maybe I'm blind but I can't seem to find any documentation that talks about this.

Answer 1

This is a namespaced event and the documentation ^[docs] describes it pretty well:

An event name can be qualified by event namespaces that simplify removing or triggering the event. For example, "click.myPlugin.simple" defines both the myPlugin and simple namespaces for this particular click event. A click event handler attached via that string could be removed with .off("click.myPlugin") or .off("click.simple") without disturbing other click handlers attached to the elements. Namespaces are similar to CSS classes in that they are not hierarchical; only one name needs to match. Namespaces beginning with an underscore are reserved for jQuery's use.