Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   addEventListener, передать параметр обработчику (https://javascript.ru/forum/misc/75740-addeventlistener-peredat-parametr-obrabotchiku.html)

pokk 02.11.2018 09:10

addEventListener, передать параметр обработчику
 
Есть динамическое число элементов, который должны выполнять изменение текста (по событию change) в разных ячейках таблицы.
Как для них сделать обработчики ?

1) можно ли сделать один обработчик а внутрь передать какой-нибудь индекс того какой элемент его вызывал ?
2) Как сделать переменное количество функций ?

Nexus 02.11.2018 09:19

п.1
//устанавливаем обработчик на родителя всех элементов, для которых нужно слушать события
document.querySelector('#container').addEventListener('change',function(e){
    if(!e.target.classList.contains('target'))//Если элемент, на котором произошло событие не имеет класса target, то ничего не делаем
        return;
    
    const that=e.target;//Элемент, на котором произошло событие
});

pokk 02.11.2018 09:33

В чем разница между?
select.addEventListener("change",SwitchDirect);

function SwitchDirect(){
	
	console.log(this);
	if(this.id==="Id_typeIn_0"){
		
	}	
	if(this.id==="Id_typeIn_1"){
		
	}
}


Все элементы создаются динамически, и на этапе создания я сразу к элементу добавляю addEventListener

Nexus 02.11.2018 09:44

pokk, разница в том, что вы на каждый элемент будете вешать по обработчику события, а я повешаю только 1 обработчик.
Да и в вопросе у вас написано "можно ли сделать один обработчик", так что разница должна быть очевидна.

рони 02.11.2018 09:46

Цитата:

Сообщение от pokk
В чем разница

класс проще проверить плюс не нужно навешивать на каждый select

pokk 02.11.2018 10:21

Получается, что при создании элемента я присваиваю ему класс, а потом как вся таблица создана, нахожу все элементы с классом и вешаю обработчик на них всех.
Nexus,
"разница в том, что вы на каждый элемент будете вешать по обработчику события, а я повешаю только 1 обработчик."
Ну так вот в итоге будет тоже самое ? у вас будет 1 функция обработчик на всех элементах, и у меня будет тоже самое каждому элементу присвоена 1 функция и в итоге будет у всех элементов 1 обработчик, просто вы сразу массиву элементов присвоили обработчик, а у меня по штучно. Или не так ?

Nexus 02.11.2018 10:29

pokk, не так.
У вас кол-во обработчиков, которое будет повешано на элементы будет равно кол-ву этих элементов, а у меня всего 1.
Почитайте про делегирование:
https://learn.javascript.ru/event-delegation

laimas 02.11.2018 10:46

Цитата:

Сообщение от pokk
при создании элемента я присваиваю ему класс

И как по классу ориентироваться во множестве? Уж лучше тогда писать в атрибут ячеек индекс строки и индекс столбца. Конечно если в этом есть необходимость.

pokk 02.11.2018 13:42

laimas, "Уж лучше тогда писать в атрибут ячеек индекс строки и индекс столбца" Это через какой параметр?

Nexus 02.11.2018 13:49

pokk, в смысле "параметр"?
У элементов в html есть атрибуты, есть data-атрибуты.
Во вторые можно затолкать что угодно (главное, чтобы в строку конвертировалось) и при необходимости извлечь.
Про data-атрибуты:
https://developer.mozilla.org/ru/doc...ata_attributes
https://developer.mozilla.org/ru/doc...lement/dataset


Часовой пояс GMT +3, время: 18:28.