0

Есть к примеру код. Как по клику, допустим, на блок "Кнопка 3" обратится именно к ней?

В jQuery это будет выглядеть так:

$('.test').click(function() {
  $(this).addClass('active');
})
.active {
  color: red;
}
<div class="test">Кнопка 1</div>
<div class="test">Кнопка 2</div>
<div class="test">Кнопка 3</div>
<div class="test">Кнопка 4</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

А как такого же результата добиться с помощью чистого JavaScript?

Вариант, к примеру, querySelectorAll('.test')[2] не подходит: мы заранее не знаем сколько элементов на странице и на какой конкретно будет произведено нажатие

2
  • Минусы на ответах не мои.
    – user256824
    21 дек 2019 в 10:12
  • Я тоже минусы не ставила. Варианты meine и AlexDevTime, помогли, спасибо 21 дек 2019 в 10:21

2 ответа 2

0

При большом количестве элементом не нужно их перебирать в цикле или forEach. Для этого существует делегирование событий, когда на их общий родительский элемент ставится обработчик, а определяется на какой именно кликнули элемент по event.target

https://learn.javascript.ru/event-delegation

<div id="parent">
  <div class="test">Кнопка 1</div>
  <div class="test">Кнопка 2</div>
  <div class="test">Кнопка 3</div>
  <div class="test">Кнопка 4</div>
</div>

А теперь в JS:

const parent = document.getElementById('parent');
parent.onclick = function(event) {
  let target = event.target; // где был клик?

  // можем проверить ту да ли мы кликнули в  if
  // а потом сделать какое-то действие с event.target
};
-1

Кажется, вот, что вам нужно

element.addEventListener("click",function(){
this //хранит элемент, на который нажали, тобишь element
})
1
  • не на который нажали, а к которому привязан обработчик
    – Grundy
    20 дек 2019 в 22:02

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.