task2494

Этот сайт лучше всего просматривать в современном браузере с включённым JavaScript.

task2494

AlexMi

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="parent-1">
      <div id="parent-2">
        <div id="parent-3">
          <button id="click-target">Click me</button>
        </div>
      </div>
    </div>
    <script>
      const list = document.querySelector('#click-target');
      list.addEventListener('click', () => console.log(list.id), );

      const list1 = document.querySelector('#parent-3');
      list.addEventListener('click', () => console.log(list1.id), true);

      const list2 = document.querySelector('#parent-2');
      list.addEventListener('click', () => console.log(list2.id), true);

      const block = document.querySelector('#parent-1');
      block.addEventListener('click', () => console.log(block.id), true);
    </script>
  </body>
</html>```
Не могу понять почему работает некорректно [upl-image-preview url=https://ru.coderslang.com/assets/files/2022-07-19/1658228556-588-screenshot-1.png]
[upl-image-preview url=https://ru.coderslang.com/assets/files/2022-07-19/1658228556-35790-screenshot-2.png]

AlexMi

Pepe

У трех лисенеров не хватает одного полезного параметра для передачи сообщения в консоль при нажатии на кнопку.

AlexMi

Pepe Не совсем понял. Вы имеете ввиду { capture: true }? Тогда нет. Короткая запись допустима

AlexMi

Pepe Можете еще намекнуть ?

AlexMi

Все решил, просто названия переменных не дописал.

AlexMi

<html>
  <head>
    <title></title>
  </head>
  <body>
    <div id="parent-1">
      <div id="parent-2">
        <div id="parent-3">
          <button id="click-target">Click me</button>
        </div>
      </div>
    </div>
    <script>
      const list = document.querySelector('#click-target');
      list.addEventListener('click', () => console.log(list.id), { capture: true });

      const list1 = document.querySelector('#parent-3');
      list1.addEventListener('click', () => console.log(list1.id), { capture: true });

      const list2 = document.querySelector('#parent-2');
      list2.addEventListener('click', () => console.log(list2.id), { capture: true });

      const block = document.querySelector('#parent-1');
      block.addEventListener('click', () => console.log(block.id), { capture: true });
    </script>
  </body>
</html>```