Говоря простым языком Javascript, как определить, какой элемент я щелкнул в нодлисте?

Question

У меня есть номер кнопки с именем класса «кнопка». Я ищу способ определить простым javascript, какую кнопку я нажал. Используя jQuery я бы сделал

jQuery(".button").index(this);

Я пытался найти способ с

document.querySelectorAll(".button").onclick = () =>
{
    console.log("You clicked button number" + ???);
}

Это не реагирует ни на одну кнопку, тогда как document.querySelector(".button") только выбирает первая кнопка.

Answer 1

Так вы можете определить, какая кнопка нажата

const buttons = document.querySelectorAll('.button');

buttons.forEach(button => {
	button.addEventListener('click', (event) => {
    	console.log('Clicked on: #id-' + event.target.id);
    })
})

<button class="button" id="1">button 1</button>
<button class="button" id="2">button 2</button>
<button class="button" id="3">button 3</button>

Вы можете получить любой другой атрибут из event.target объекта.

Answer 2

Вы можете просто l oop всех элементов, используя querySelectorAll и прикрепить событие к каждому.

Основной недостаток этого - вы будете добавлять несколько событий. Кроме того, если элементы будут добавлены позже, вам также придется добавить к ним события.

Другой вариант - использование делегированного события, в основном это прикрепление события к какому-либо родительскому элементу и ожидание щелчка там, вы мог прикрепить это к телу. Вы можете прикрепить к телу, но по причинам производительности, если вы можете прикрепить к некоторому родительскому элементу, он работает лучше.

например ..

const youClicked = document.querySelector('.you-clicked');

document.querySelector('.buttons')
  .addEventListener('click',(e) => {
    //lets only look for the buttons
    //and not for this div
    if (e.target.tagName === 'BUTTON') {
      youClicked.innerText = e.target.innerText;
    }
  });

<div class="buttons">
  <button>One</button>
  <button>Two</button>
  <button>Three</button>
  <button>Four</button>
  <button>Five</button>
  <button>Six</button>
  <button>Seven</button>
</div>

<br>
<div>
  You Clicked =>
  <span class="you-clicked">?</span>
<div>

Answer 3

1) Использование onclick в JavaScript
Вы можете использовать .forEach() для итерации каждой кнопки.
Затем вы можете получить информацию о каждом событии щелчка.

document.querySelectorAll("button").forEach((button, index) => {
  button.onclick = (event) => {
    console.log("You clicked button number " + index);
    console.log("You clicked button with class " + event.toElement.className);
    console.log("You clicked button with text " + event.toElement.innerText);
  }
})

2) Использование onclick в HTML
Вы можете использовать this в .onclick вызове функции, чтобы получить элемент кнопки при нажатии.

<button class="button teste" onclick="whatButton(this)">1</button>
<button class="button teste" onclick="whatButton(this)">2</button>
<button class="button teste" onclick="whatButton(this)">3</button>

function whatButton (button) {
  console.log("You clicked button with class " + button.className);
  console.log("You clicked button with text " + button.innerText);
}

3) Использование addEventListener
Это похоже на .onclick, но вы можете использовать this непосредственно для нацеливания на элемент кнопки.

document.querySelectorAll("button").forEach((button, index) => {
  button.addEventListener("click", function() {
    console.log("You clicked button number " + index);
    console.log("You clicked button with class " + this.className);
    console.log("You clicked button with text " + this.innerText);
  })
})