Bootstrap js plugin source code how $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) works out?

Question

I was looking at the js plugin of bootstrap,namely bootstrap-typeahead.js.I can't figure out how element is selected.

$('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) 

I know element is actually selected by the data-provide part,but when I look through jquery.js , I can't figure out how it is done.From .on() part I went to event.add() part then I became more confused.Can anyone tell me how that's done?

I know what it does,but want to know how.How element is selected? I need more ideas here.

Answer 1

The first argument of the on() method is the event, in this case it is namespaced - the event is focus in the typeahead.data-api namespace

The second argument is a filter-selector for event-delegation purposes. The actual event handler is attached to the body element, but the handler function is only executed for events coming from elements with the data-provide attribute with a value of typeahead