Как будет выглядеть этот код без jquery?

Question

[lavezzi1]

$(document)
    .on(Event.KEYDOWN_DATA_API, Selector.DATA_TOGGLE,  Dropdown._dataApiKeydownHandler)
    .on(Event.KEYDOWN_DATA_API, Selector.MENU, Dropdown._dataApiKeydownHandler)
    .on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Dropdown._clearMenus)
    .on(Event.CLICK_DATA_API, Selector.DATA_TOGGLE, function (event) {
      event.preventDefault()
      event.stopPropagation()
      Dropdown._jQueryInterface.call($(this), 'toggle')
    })
    .on(Event.CLICK_DATA_API, Selector.FORM_CHILD, (e) => {
      e.stopPropagation()
    })

Пробовал банально повешать метод Dropdown._clearMenus на документ

document.addEventListener(Event.CLICK_DATA_API, Dropdown._clearMenus);
document.addEventListener(Event.KEYUP_DATA_API, Dropdown._clearMenus);

Не работает.

В чем секрет?

Comments

[Назар Мокринский]

Вы будете задавать вопросы пока вам в ответах не перепишут всю библиотеку jQuery? Откройте исходники, почитайте что да как

Answer 1

[Stalker_RED]

В чем секрет?

В том, что там по три параметра, а вы проигнорировали средний, например?
https://api.jquery.com/on/

Переписать можно как-то так:

document.addEventListener(Event.CLICK_DATA_API, function(evt){
  if (evt.target && evt.target.matches(Selector.DATA_TOGGLE)) {
    Dropdown._clearMenus(evt)
  }
});

Comments

[lavezzi1]

В приведенном примере два параметра

[Stalker_RED]

lavezzi1: Точно по два?

В третьей строчке два, не поспоришь.

[lavezzi1]

Stalker_RED: Как то не работает :/

[Stalker_RED]

lavezzi1: в jQuery при трех параметрах:
.on(_событие_, _селектор_, _функция_)
На ванильном будет так:

document.addEventListener(_событие_, function(evt){
  if (evt.target && evt.target.matches(_селектор_)) {
    _функция_(evt)
  }
});

[lavezzi1]

Stalker_RED: ок.

$(document).on(`${Event.CLICK_DATA_API} ${Event.KEYUP_DATA_API}`, Popover._clearMenus)

В этой строке нет селектора ведь? Когда через jquery подвешиваешься на документ, через девтулс не видно слушателей. А через addEventListener видно, почему так? Куда jquery тогда вешает слушатели?

[lavezzi1]

Stalker_RED: Почему jquery подписывается на событие "click.mz.dropdown.data-api" и все работает, что это вообще за событие? они ни где не диспатчатся.

[Stalker_RED]

lavezzi1: Это бутстраповское что-то?

[Stalker_RED]

В этой строке нет селектора ведь?

Да, там два события и функция.

[lavezzi1]

Stalker_RED: Да https://github.com/twbs/bootstrap/blob/v4-dev/js/s...

[lavezzi1]

Stalker_RED: Объясни пожалуйста.

[Stalker_RED]

lavezzi1: Что именно объяснить?

[lavezzi1]

Stalker_RED: Зачем на документе слушать событие "click.bs.dropdown.data-api"? Что это за событие и когда оно происходит? В файле выше

[Stalker_RED]

lavezzi1:
В файле по ссылке нет строки click.bs.dropdown.data-api.

Вообще, jQuery умеет в пространство имен для событий https://api.jquery.com/event.namespace/

Вероятно это событие как-то связано с открытием/закрытием меню, и слушают его для того, чтобы переключать состояние меню.