Как повесить обработчик событий ‘click’ на элемент который создается в js и взаимодействует с базой данных [закрыт]
Закрыт. Этот вопрос не по теме. Ответы на него в данный момент не принимаются.
Вопрос вызван проблемой, которая больше не воспроизводится, или опечаткой. Хотя похожие вопросы могут быть уместны на этом сайте, решение для этого вопроса вряд ли поможет будущим посетителям. Обычно можно избежать подобных вопросов написанием и исследованием минимальной программы для воспроизведения проблемы до публикации вопроса.
Закрыт 2 года назад .
Есть слайдер, в котором находятся карточки которые создаются в js а значения приходят с сервера. В карточках есть элемент, на который нужно повесить обработчик событий, но как только не пробовал, ничего не получается. (нужно повесить на элемент cards__input__plus). Хотел вставить пример кода, но из-за того что данные приходят с сервера, смысла в html и css нет. Все есть в js, элементы с классами на которые хочу повесить обработчик событий тоже есть в js
function cards() < // Используем классы для карточек class MenuCard < constructor(src, srcSale, srcNew, srcRecommend, availability, code, text, newPrice, price, parentSelector, . classes) < this.src = src; this.srcSale = srcSale; this.srcNew = srcNew; this.srcRecommend = srcRecommend; this.availability= availability; this.code = code; this.text = text; this.newPrice = newPrice; this.price = price; this.classes = classes; // мы не знаем сколько будет аргументов в будущем this.parent = document.querySelector(parentSelector); //обязательно получаем только 1 элемент >render() < const element = document.createElement('div'); //создаем какой-то блок if (this.classes.length === 0) < this.element = "cards__item"; element.classList.add(this.element); sliderTwo(); >else < this.classes.forEach(className =>element.classList.add(className)); //мы перебираем весь массив, и присваем className каждому элементу > // если у нас ничего не добавляется, ты мы добавляем сами "cards__item" // Если же у нас есть что-то, то мы перебираем через forEach, так как у нас это массив element.innerHTML = ` alt="" > 
alt="" > 
alt="" > 
alt="" > $
$
$
$
$ 
0
`; this.parent.append(element); // добавляем в самый конец своего родителя > > getResource('http://localhost:3000/cards') .then(data => < // data Это большой массив из db.json data.forEach(() =>< new MenuCard(src, srcSale, srcNew, srcRecommend, availability, code, text, newPrice, price, '.cards__slider .cards__inner').render(); >);// Этот конструктор будет создаваться столько раз, сколько объектов внутри массива // который мне придет из сервера >); > const getResource = async (url) => < //В функции будет какойто асинхронный код, поэтому мы написали async const res = await fetch(url); // тут мы пишем куда // использовали его парный оператор await, перед теми // операциями, которые нужно дождаться. Эти операторы всегда используются в паре! if(!res.ok) < throw new Error(`Coul not fetch $, status: $`); // Это на слуяай если будет ошибка > return await res.json(); //Дожидается работы этого промиса и только потом его возвращает >; cards(); // Price function price() < const plus = document.querySelectorAll('.cards__input__plus'); plus.forEach(item => < item.addEventListener('click', () =>< console.log('fsdfsdf'); >); >); > price();Обработчики Событий в JS (как работает addEventListener)
В этой статье мы с вами разберемся как правильно использовать обработчики событий (addEventListener) в Javascript на различных элементах DOM дерева страниц. Эти элементы могут включать кнопки, ссылки, изображения и так далее.
Любой DOM элемент запускает событие, когда мы с ним как-то взаимодействуем (кликаем, наводим мышь и др.). Обработчики событий в JS используются для того, чтобы реагировать на эти события.
Обработчики событий можно «вешать» на любые элементы DOM (Data Object Model) дерева, а также глобальные объекты window и document.
Предположим, на нашей странице есть html элемент button с классом «btn»:
1div class="wrapper">2 button class="btn">Click/button>3 /div>
Давайте выделим наш элемент button и присвоим его переменной button:
1const button = document.querySelector('.btn');
Чтобы «повесить» обработчик событий на наш элемент button, нужно использовать специальный метод — addEventListener. Этот метод принимает 2 аргумента:
- Тип события (мы будем «слушать» событие «click»).
- Так называемую колбэк (callback) функцию, которая запускается после срабатывания нужного события.
Колбэк функция (callback function) — отличается от обычной функции, тем, что ее запускаем не мы, а браузер, который делает это после срабатывания события.
1const button = document.querySelector('.btn');2button.addEventListener('click', function ()3 console.log('click');4 >);
Таким образом, каждый раз после срабатывания события «click» будет запускаться наша коллбэк функция и мы будем получать строку «click» в нашей консоли.
Обработчики событий JS (выносим логику коллбэк функции за пределы метода addEventListener)
Мы также можем вынести нашу коллбэк функцию за пределы метода addEventListener, а внутри обработчика событий просто ссылаться на нее:
1const button = document.querySelector('.btn');23 function handleClick()4 console.log('click');5 >6button.addEventListener('click', handleClick);
Плюс такого подхода заключается в том, что теперь мы легко можем повторно использовать логику нашего обработчика событий для других элементов DOM дерева.
Давайте использовать готовую логику в функции handleClick — для новой кнопки:
1div class="wrapper">2 button class="btn">Click/button>3 button class="btnTwo">Click 2/button>4 /div>
1const button = document.querySelector('.btn');2 const buttonTwo = document.querySelector('.btnTwo');34 function handleClick()5 console.log('click');6 >7button.addEventListener('click', handleClick);89 // Вешаем обработчик событий с готовой логикой на новую кнопку10buttonTwo.addEventListener('click', handleClick);
Как снять обработчик события addEventListener с элемента?
Чтобы снять обработчик события с какого-либо элемента, нужно использовать метод removeEventListener. В качестве аргументов нужно указать не только название события («click»), но и название коллбэк функции, которая привязана к элементу.
1buttonTwo.removeEventListener('click', handleClick);
Метод removeEventListener не сработает, если в качестве коллбэк функции использовать безымянную функцию, так как будет отсутствовать возможность сослаться на нее.
Обработка событий на нескольких DOM элементах
Как использовать обработчик событий addEventListener, когда нам требуется использовать его сразу на нескольких элементах?
Предположим, на нашей странице есть 5 кнопок с классом «btn»:
1div class="wrapper">2 button class="btn">Click 1/button>3 button class="btn">Click 2/button>4 button class="btn">Click 3/button>5 button class="btn">Click 4/button>6 button class="btn">Click 5/button>7 /div>
В этом случае можно использовать 2 подхода, чтобы повесить на них обработчик событий.
Подход 1. Используем отдельный addEventListener для каждой кнопки
Здесь мы можем выделить все кнопки с одинаковым классом и присвоить их переменной buttons. Далее нам потребуется использовать цикл forEach, чтобы пробежаться по каждой кнопке в полученном списке, и повесить на нее обработчик событий addEventListener.
1const buttons = document.querySelectorAll('.btn');23 function handleClick()4 console.log('click');5 >67buttons.forEach((button) =>8 button.addEventListener('click', handleClick);9 >);
Подход 2. Делегирование события (Event delegation)
Здесь, основная идея заключается в том, что мы можем ловить события, связанные с дочерними элементами (которых может быть очень много), используя единственный родительский элемент.
То есть, мы можем повесить обработчик событий на родительский div с классом «wrapper», и обрабатывать события, которые активируются на дочерних элементах button.
Это возможно благодаря механизму, который называется «всплытие» (bubbling) в Javascript, который означает, что если событие срабатывает на каком-то элементе, оно также срабатывает на всех его родительских элементах.
Внутри нашей коллбэк функции у нас есть доступ к объекту «Событие» (Event), внутри которого мы можем использовать свойство target, чтобы получить элемент, на который мы кликнули.
1const wrapper = document.querySelector('.wrapper');23 function handleClick(e)4 console.log('click', e.target);5 // При клике получаем каждый конкретный элемент button6 // click7 // click8 >910wrapper.addEventListener('click', handleClick);
Прототипное наследование Javascript (+ видео с примером)
Поднятие в JS (Hoisting в Javascript + 3 примера)
Как добавить обработчик click для элемента elem javascript
Если в коде JavaScript возникает событие, то его обрабатывает связанный с этим событием обработчик. Рассмотрим, как определять обработчики событий.
Встроенные обработчики
Самый простой способ определения обработчиков событий — их установка в коде html. Это так называемые встроенные обработчики или inline-обработчики, которые определяются в коде элемента с помощью атрибутов. Подобные атрибуты начинаются с префикса on . Например, у многих html-элементов есть атрибут on click , который определяет обработчик нажатия элемента. Посмотрим на примере кнопки:
METANIT.COM Click Me
