addEventListener, передать параметр обработчику
Есть динамическое число элементов, который должны выполнять изменение текста (по событию change) в разных ячейках таблицы.
Как для них сделать обработчики ? 1) можно ли сделать один обработчик а внутрь передать какой-нибудь индекс того какой элемент его вызывал ? 2) Как сделать переменное количество функций ? |
п.1
//устанавливаем обработчик на родителя всех элементов, для которых нужно слушать события document.querySelector('#container').addEventListener('change',function(e){ if(!e.target.classList.contains('target'))//Если элемент, на котором произошло событие не имеет класса target, то ничего не делаем return; const that=e.target;//Элемент, на котором произошло событие }); |
В чем разница между?
select.addEventListener("change",SwitchDirect); function SwitchDirect(){ console.log(this); if(this.id==="Id_typeIn_0"){ } if(this.id==="Id_typeIn_1"){ } } Все элементы создаются динамически, и на этапе создания я сразу к элементу добавляю addEventListener |
pokk, разница в том, что вы на каждый элемент будете вешать по обработчику события, а я повешаю только 1 обработчик.
Да и в вопросе у вас написано "можно ли сделать один обработчик", так что разница должна быть очевидна. |
Цитата:
|
Получается, что при создании элемента я присваиваю ему класс, а потом как вся таблица создана, нахожу все элементы с классом и вешаю обработчик на них всех.
Nexus, "разница в том, что вы на каждый элемент будете вешать по обработчику события, а я повешаю только 1 обработчик." Ну так вот в итоге будет тоже самое ? у вас будет 1 функция обработчик на всех элементах, и у меня будет тоже самое каждому элементу присвоена 1 функция и в итоге будет у всех элементов 1 обработчик, просто вы сразу массиву элементов присвоили обработчик, а у меня по штучно. Или не так ? |
pokk, не так.
У вас кол-во обработчиков, которое будет повешано на элементы будет равно кол-ву этих элементов, а у меня всего 1. Почитайте про делегирование: https://learn.javascript.ru/event-delegation |
Цитата:
|
laimas, "Уж лучше тогда писать в атрибут ячеек индекс строки и индекс столбца" Это через какой параметр?
|
pokk, в смысле "параметр"?
У элементов в html есть атрибуты, есть data-атрибуты. Во вторые можно затолкать что угодно (главное, чтобы в строку конвертировалось) и при необходимости извлечь. Про data-атрибуты: https://developer.mozilla.org/ru/doc...ata_attributes https://developer.mozilla.org/ru/doc...lement/dataset |
Часовой пояс GMT +3, время: 18:28. |