Как реализовать jquery event delegation на чистом js?

Question

[wakenbyWork]

Как делегирование реализовать на чистом js чтобы был синтаксис такой-же как в jquery или схожий?

$(document).on('click', '.selector', function (event) {})

Нашел пример кода на чистом js https://youmightnotneedjquery.com/#delegate но не понимаю как его использовать. Хочется чтобы было удобно как в jquery и событие можно было удалить))

Так-же нашел такое решение:

function delegateEventListener (element, eventType, childSelector, handler) {
  function delegate (event) {
    let bubble

    const validElements=[].slice.call(this.querySelectorAll(childSelector)).reverse().filter((matchedElement) => {
      return matchedElement.contains(event.target);
    })

    validElements.forEach((validElement) => {
      if(bubble===undefined || bubble!==false) bubble=handler.call(validElement, event)
    })
  }

  element.addEventListener(eventType,delegate)

  return delegate;
}

export default delegateEventListener

Нет ли лучше? И можно его как-то в прототип eventTarget прописать?

Comments

[Антон Литвиненко]

для того чтобы синтаксис был такой же как в джейквери стоит использовать джейквери

[wakenbyWork]

Антон Литвиненко, Тянуть его из за одного on не хочется))

Answer 1

[Stalker_RED]

document.addEventListener('click', function myClickHandler(evt) { // слушаем все клики
  if (evt.target.matches('.selector')){ // проверяем был ли это клик по .selector
    // do your stuff
  }
});

но обычно лучше так:

document.addEventListener('click', function myClickHandler(evt) { // слушаем все клики
  const elem = evt.target.closest('.selector');
  if (elem){ // если клик мимо, то тут null
    // do your stuff
  }
});

такой подход срабатывает когда внутри вашего .selector еще какие-то элементы, иконки, и прочая, и вам все равно нужно отследить. Более универсальное решение.

Comments

[wakenbyWork]

Это вообще не подходит. Я же сказал чтобы было как в jquery)) Так я и сам умею писать

[Stalker_RED]

wakenbyWork, что вы хотите как в jquery? так?

function $(sel) {
  const elem = document.querySelector(sel);
  elem.on = function(evtType, func) {
    elem.addEventListener(evtType, function (evt) {
      const elem = evt.target.closest('.selector');
      if (elem) {
        func.bind(elem);
        func(evt);
      }
    });
  };
}

$('form').on('submit', function(evt){
  console.log(this);
  console.log(evt);
});

[wakenbyWork]

Stalker_RED, А вот это уже почти то, спасибо)) А можно как то удалить данное событие? Типа off?

[Stalker_RED]

wakenbyWork, removeEventListener, обратите внимание, что нужна ссылка на функцию, которую передавали в eventListener.
Вообще, если вам хочется похожее на jQuery, но не jQuery, то посмотрите, может, на zepto.