Привязка делегата события в javascript

Моя задача - преобразовать весь код jquery в код, совместимый с es6.

Пример:

JQuery

$('.class1 .class2').on('click', function(e) {
     // logic here
}

Совместимость с ES6

const test = document.querySelector('.class1 .class2');
test.addEventListener('click', (e) => {
//logic here
});

Это работает нормально, но я не могу преобразовать события кликов dom, которые регистрируются позже.

Пример:

JQuery

$(document).on('click', '.class1 .pagination a', 
    function(e) {
     //logic here
})

Что я пытаюсь сделать:

var classname = document.querySelectorAll(".class1 .pagination a");

Array.from(classname).forEach(function(element) {
  element.addEventListener('click', (e)=>{
    e.preventDefault();
    alert(e);
  });
});

Здесь класс .class1 .pagination a регистрируется позже, поэтому имя класса становится пустым. Но с использованием jquery $(document).on('click', '.class1 .pagination a') он работает правильно.

Любой указатель на то, как преобразовать события типа $(document).on('click', '.class1 .pagination a') в es6?

Итак, короткий вопрос, который вы задаете и который можно задать в Google в Google или в stackoverflow, - это «как сделать привязку события делегата в javascript».

— 04.10.2018 16:36

Я не знаю, почему вы используете массив.

— 04.10.2018 16:45

Возможный дубликат Что такое делегирование событий DOM?

— 04.10.2018 16:45

В частности, ответ stackoverflow.com/a/33015903/1586174 показывает некоторые фрагменты логики делегирования

— 04.10.2018 16:46

javascript jquery ecmascript-6

04.10.2018 16:33

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

1 175

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы можете использовать делегирование событий, проверив цель события с помощью Element.matches ():

const delegate = (container, evtType, targets, cb) => {
  const cont = (container === document || container instanceof HTMLElement) ?
    container : document.querySelector(container);

  if (!container) throw new Error('Event container not found');

  document.addEventListener(evtType, e => {
    if (!e.target.matches(targets)) return;

    cb(e);
  });
}

delegate(document, 'click', 'span, .class, #id, .container .inner a', (e) => console.info(e.target.innerText));

<div class = "class">A class</div>
<div id = "id">An id</div>
<span>An element</span>
<div class = "container">
  <div class = "inner"> <a href = "#">Nested Selectors</a></div>
</div>

<div>Not delegated</div>

04.10.2018 16:49

Ответ принят как подходящий

Вы можете прикрепить событие к документу и отфильтровать его с помощью селектора, используя функцию matches(), например:

document.addEventListener('click', clickEvent)

function clickEvent() {
  if (!event.target.matches('.class1 .pagination a')) return
  console.info(event.target)
}

//--JUST FOR DEMO START
setTimeout(function() {
  $('ul').append("<li class='class1'><div class='pagination'> <a href='#'>Coffe</a></div></li>");
}, 1000);
//--JUST FOR DEMO END

document.addEventListener('click', clickEvent)

function clickEvent() {
  if (!event.target.matches('.class1 .pagination a')) return
  console.info(event.target)
}

<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul class=”characters”>
  <li class='class1'>
    <div class='pagination'> <a href = "#">Milk</a></div>
  </li>
  <li class='class2'>
    <div class='pagination'> <a href = "#">Tea</a></div>
  </li>
</ul>

04.10.2018 16:50

Другие вопросы по теме

Проблемы с javascript с добавлением jquery

Как скрыть и переключить элемент всплывающего окна, когда я нажимаю на тот же div или за пределами div?

Обнаружение бездействия на сенсорных устройствах с помощью javascript

Как преобразовать элемент jquery в экземпляр машинописного текста?

Отключить прокрутку основного содержимого при открытой прокручиваемой боковой панели

Почему show () работает только доли секунды?

Jquery sortable не работает с динамически добавленными элементами

Добавить таблицу tr с модальным всплывающим окном

Как выровнять линии маркера в середине / центре столбцов - High Charts

Как я могу добавить правило css в div по истечении определенного периода времени, установить задержку, а затем добавить еще одно правило css с помощью jquery?

Привязка делегата события в javascript

Ответы 2

Другие вопросы по теме

Похожие вопросы