Показать сообщение отдельно
  #3 (permalink)  
Старый 26.07.2017, 10:19
Новичок на форуме
Отправить личное сообщение для GeekHacker Посмотреть профиль Найти все сообщения от GeekHacker
 
Регистрация: 25.07.2017
Сообщений: 9

ну почему же? Есть два элемента с id a и с id b внутри родителя с id d.
Мы хотим обрабатывать клики на a и b через делегирование. Для чего вешаем два обработчика на d.
При клике на любой из элементов будут запускаться оба обработчика.
Другое дело, что внутри обработчиков мы вычисляем event.target и полезный код будет выполнен только в случае, если event.target тот, что нам нужен, но это не отменяет того факта, что запустятся оба обработчика.
Топорный пример
var x = 2;
document.addEventListener('DOMContentLoaded', function(){
	//первый обработчик
	document.getElementById('d').addEventListener('click', function(event){
		x++;
		var target = event.target;
		while(target != this){
			if(target.id == 'a'){
				alert('Вы кликнули по элементу с ID "a"');
				return;
			}
			else
				target = target.parentNode;
		}
	});
	//второй обработчик
	document.getElementById('d').addEventListener('click', function(event){
		x++;
		var target = event.target;
		while(target != this){
			if(target.id == 'b'){
				alert('Вы кликнули по элементу с ID "b"');
				return;
			}
			else
				target = target.parentNode;
		}
	});
});

По клику на любом элементе мы увидим сообщение (одно), т.к. определив event.target мы всё правильно разрулили, но значением переменной x будет 2. Т.к. оба обработчика инкрементировали предыдущее её значение.
Да, можно было бы повесить один обработчик и в условиях зависимо от event.target всё разруливать, но это вообще не вариант. Т.к. логики будет много и там запутаться можно будет.
Ответить с цитированием