Javascript-форум - Всплытие событий и this, странное поведение

Javascript-форум (https://javascript.ru/forum/)

- Events/DOM/Window (https://javascript.ru/forum/events/)

- - Всплытие событий и this, странное поведение (https://javascript.ru/forum/events/64014-vsplytie-sobytijj-i-strannoe-povedenie.html)

Всплытие событий и this, странное поведение

Всем привет!
Объясните дураку, почему так происходит:
Создаю объект с шаблонной функцией, в теле функции используется ключевое слово this, через него пытаюсь получить имя тэга на котором произошло событие, эту функцию назначаю как событие клик двум кнопкам и все работает чудесно, но если вдобавок назначить эту же функцию как клик по BODY, то происходит следующее:

кликаю по кнопке (любой из двух) первый раз, срабатывает как надо (событие кнопки, затем событие body)
кликаю второй раз (опять же не важно по какой, той же или по соседу), и срабатывает только событие BODY игнорируя событие кнопки
дальше куда не кликай срабатывает только событие BODY, событие кнопки кликом мыши вызвать не удается, можно вызвать только через dispatchEvent

Предполагаю, что что-то не то с this, но не пойму, что именно...
Исходник прилагается. Заранее Спасибо!

<html>
	<head></head>
	<body>
		<button id="xxxz">0001</button>
		<button id="xxxx">0002</button>
		<script>
			var q = {
				xxx:function (){
					this.innerHTML += this.tagName;
				}
			}

			
			var x = document.getElementById('xxxz');
			x.addEventListener('click',q.xxx);

			var z = document.getElementById('xxxx');
			z.addEventListener('click',q.xxx);
			
			document.body.addEventListener('click',q.xxx);
		</script>
	</body>
</html>

body.innerHTML изменяет содержимое body
все обработчики событий внутренних элементов затираются

insertAdjacentHTML() разбирает указанный текст как HTML или XML и вставляет полученные узлы (nodes) в DOM дерево в указанную позицию.
Данная функция не переписывает имеющиеся элементы, что предовращает дополнительную серелизацию и поэтому работает быстрее, чем манипуляции с innerHTML.

Синтаксис

element.insertAdjacentHTML(position, text);

position указывает положение element, и может принимать одно из следующих значений:

'beforebegin'
Перед element .
'afterbegin'
Внутри element, перед первым дочерним элементом (потомком).
'beforeend'
Внутри element, после последнего дочернего элемента.
'afterend'
После element.

text строка, которая будет проанализирована как HTML или XML и вставлена в DOM дерево документа.

Цитата:

Сообщение от Poznakomlus

серелизацию

Аутентично, чо. )))

ТС, к этой xxx прикрути функцию инициализации ивентов после замены хтмля и усе будет чики-пуки.

warren buffet,
читай внимательно и в предыдущих темах так-же, никто головой об доску бить не будет. еще раз подумай что написал, не понимаешь, прочитай 2-3 раза, забей и отдохни

Цитата:

Сообщение от warren buffet (Сообщение 422181)

ТС, к этой xxx прикрути функцию инициализации ивентов после замены хтмля и усе будет чики-пуки.

Спасибо конечно, но это не тема топика) И так ясно что переопределив сработку событий все будет "чики-пуки", но прошу перед тем как ответить, вникнуть в вопрос, где тема вопроса была ПОЧЕМУ, а не КАК) Господин Познакомлюсь все правильно написал, вник в вопрос и ответил, ответил надо заметить больше чем я спрашивал, так еще и по делу) А Ваш ответ, не хочу обидеть, выглядел так:
-вопрос: Как почистить унитаз если ершик сломался?
-ответ: Мой раздроченым, только активнее и все будет "чики-пуки".
Какой-то не точный ответ для людей связанных с точными науками) Спасибо за совет, но я пожалуй буду рациональнее расходовать ресурсы)

Это про "серелизацию" он правильно написал? ))) Типа покакал - провел серилизацию. Угораю с вас.

Сериализация - вот как пишется селяне.

Пойду бухану с горя... )))