Можно ли повесить на родительский элемент addEventListener чтобы он сработал на дочерних элементах?

Question

Можно ли сделать, чтобы обработчик который повесил на общий родительский элемент, непосредственно реагировал на самый глубоко вложенный дочерний элемент? В данном случает это параграфы внутри дивов внутри дива?

let items = document.getElementById('items');
let item = items.getElementsByTagName('P');

items.addEventListener('click', function(event) {
  if (event.target === item) {
    console.log('Клик по параграфу')
  }
})

<div id='items'>
  <div class='item'>
    <p>Параграф 1</p>
  </div>
  <div class="item">
    <p>Параграф 2</p>
  </div>
  <div class="item">
    <p>Параграф 3</p>
  </div>
</div>

Answer 1

Тебе нужно делегирование по event.target,
вот если коротко: https://www.youtube.com/watch?v=pYu3KszRnB4

Вот если не разбираться код который вам нужен:

let items = document.getElementById('items');

items.addEventListener('click', (e) => {
    const  { target } = e;
    if (target.matches('p')) {
        console.log('Клик по параграфу')
    }
})

Вот если не понятно:

let items = document.getElementById('items');

items.addEventListener('click', function(event) {
    if (event.target.tagName === "P") {
        console.log('Клик по параграфу')
    }
})

Answer 2

Вот таким образом можно реализовать.

let items = document.getElementById('items');
let item = items.getElementsByTagName('P');

items.addEventListener('click', function(event) {
  if (event.target.tagName === 'P') {
    console.log('Клик по параграфу:', event.target.textContent);
  }
});

<div id='items'>
  <div class='item'>
    <p>Параграф 1</p>
  </div>
  <div class="item">
    <p>Параграф 2</p>
  </div>
  <div class="item">
    <p>Параграф 3</p>
  </div>
</div>

БЛОГ НА HUSL

Можно ли повесить на родительский элемент addEventListener чтобы он сработал на дочерних элементах?

Ответы (2 шт):