Событие click в JavaScript: изменение родительского элемента

Быстрый ответ

Для получения доступа к родительскому элементу через объект события можно использовать свойство event.target.parentNode внутри обработчика событий:

document.addEventListener('click', (event) => {
  let parent = event.target.parentNode; 
  // работать с родительским элементом мы теперь можем с помощью переменной 'parent'
});

Таким образом, возможность манипулировать родительским элементом, в пределах которого произошло событие, становится доступной – это могут быть изменения в DOM или запуск других событий.

Понимая event.target и event.currentTarget

Если вам не достаточно одних только простых ответов и вы хотите узнать больше – отлично! Погрузитесь в мир делегирования событий.

document.querySelector('section').addEventListener('click', (event) => {
  // event.currentTarget ссылается на 'section' – элемент, на котором назначен обработчик.
  // event.target – это тот конкретный элемент в 'section', по которому произошёл клик.
  // Поднимаемся на уровень вверх от event.target:
  let parentOfClicked = event.target.parentNode;
  // И вот у нас в руках родительский элемент.
});

Таким образом, изучая принципы делегирования событий, вы создаёте зону влияния общего родительского элемента, например section, и с помощью event.target определяете активный элемент – тот, по которому было произведено нажатие.

Ценность event.currentTarget

Не только тот, кто в плаще, бывает героем

event.target показывает нам место действия. Но что, если нужен истинный герой, которым является сам элемент, инициировавший событие?

myElement.addEventListener('click', (event) => {
  // Это будет myElement, или иными словами – event.currentTarget.
  let eventListenerElement = event.currentTarget; 
  // Самые ценные вещи бывают в маленьких посылках!
});

Делегирование с помощью event.currentTarget

В контексте делегирования событий свойство event.currentTarget может стать ключом к пониманию родительского элемента:

document.querySelector('ul').addEventListener('click', (event) => {
  // Это всегда будет 'ul', даже если был произведен клик по его потомку li.
  let delegateParent = event.currentTarget; 
  // Меняем фоновый цвет родительского элемента.
  delegateParent.style.backgroundColor = 'lightblue';
});

Подробнее об этом расскажет наш спикер на видео

Пора действовать!

Теперь вы можете смело приступать к изменениям в родительском элементе, обновлению его innerHTML и наслаждаться результатами.

document.querySelector('ul').addEventListener('click', (event) => {
  let parentContent = event.currentTarget.parentNode; 
  parentContent.innerHTML = '<p>Новый контент!</p>'; 
  // Родительский элемент теперь обновлён новым содержимым внутри innerHTML.
});

Лучшие практики работы с родительскими элементами

Забываем о jQuery

Современный и лаконичный JavaScript способен управлять DOM с легкостью, при этом обходясь без jQuery. Это проще, элегантнее и совершенно без лишних зависимостей.

Безопасность превыше всего: используйте parentNode осторожно

Опираться только на parentNode может быть рисковано из-за возможного наличия текстовых узлов или комментариев в DOM:

// Похоже на идеального родителя, не так ли? Но всё может быть не так однозначно!
let riskyParent = event.target.parentNode;

Для того чтобы минимизировать ошибки, проверяйте тип узла:

let safeParent;
if (event.target.nodeType === Node.ELEMENT_NODE) {
  safeParent = event.target.parentNode; 
 // Вот теперь точно то, что было нужно! Ваш 'родитель' готов к танцам.
}

Будьте настороже!

Вы выбрали правильного родителя? Удостоверимся!

Чтобы удостовериться в правильности выбора родительского элемента, можно проверить его. Быстрая запись в консоль поможет уточнить ситуацию.

console.log(parent); // Давайте убедимся в правильности выбора!

Грамотно организованные обработчики событий

Убедитесь, что обработчик событий настроен правильно, вы должны определить тип события и колбек-функцию. Не спешите работать вслепую.

// Упс, кажется, здесь ошибка.
element.addEventListener(); 

// Вот так будет правильно. Теперь всё готово.
element.addEventListener('click', eventHandler);

Лаконичный код: создаем абстракцию для логики получения родительского элемента

Вы можете улучшить читаемость кода, скрыв детали в функции:

// Вот так наш код становится ещё изящнее.
function getParent(event) {
  return event.target.parentNode; 
}

// Погружаемся в код.
document.addEventListener('click', (event) => {
  let parent = getParent(event); 
  // Вот это да! Теперь всё стало намного проще.
});

Визуализация

Включите воображение и представьте следующее:

Выставляем доминошки? Поехали:
- Первая плитка: `event.currentTarget`
- Линия домино: вложенные элементы
- Последняя плитка: `event.target`

document.addEventListener('click', function(event) {
  // Когда упадает последняя плитка (`event.target`).
  let parentDomino = event.target.parentNode; // Мы обращаемся к родительскому элементу.
});

Вот что получается у нас в итоге:

🪆 (Первая плитка)
   🪆 (Промежуточные плитки)
      🪆 (Последняя плитка / `event.target`)
           👏 (Аплодисменты!)

И конечный результат:

Все доминошки падают по цепочке:
🪆⬆️ (Родитель доступен через `.parentNode`)

Полезные материалы

1. Свойство события: target – Веб API | MDN — MDN подробно рассказывает о свойстве Event.target.
2. Узел: свойство parentNode – Веб API | MDN — MDN погружает вас в мир parentNode.
3. Всплытие и перехват — Подробное объяснение механизма событий на JavaScript.info.
4. В чем разница между свойствами currentTarget и target в JavaScript? – Stack Overflow — Обсуждение Event.target и Event.currentTarget на Stack Overflow.
5. Свойство parentNode элемента HTML DOM — Обучающий обзор работы с родительскими узлами на W3Schools.
6. JavaScript – как добавить класс в зависимости от html на странице с помощью jquery? – Stack Overflow — Примеры взаимодействия элементов и родителей на Stack Overflow.
7. Обработка событий в jQuery — Руководство по работе с событиями в jQuery от DigitalOcean.