Как по разному реагировать на клик на большое количество элементов?

Question

[wbrapist]

Например, есть div-блоки:

<div></div> <!-- Первый блок -->
...
<div></div> <!-- Тысячный блок -->

Дальше:
var div = document.querySelectorAll('div');

И как мне обработать все DIV? Например, нажимаю на первый, вывод:
Привет, я 1 блок
Нажимаю на 305 div
Привет, я 305 блок

В общем, суть в том, что мне нужно знать на какой блок был произведен клик, и уже от его порядкового номера (который нужно получить) что-то делать (опять же, под что-то, я имею в виду какую-нибудь функцию, которая будет одинакова во всех блоках, но будет получать в виде аргумента порядковый номер DIV'a).

Количество блоков не известно заранее.

Answer 1

[ThunderCat]

Подсказки:
data attribute, addEventListener(), e.target

Answer 2

[Stalker_RED]

Два варианта:
1. Повесить обработчик на каждый блок

var divs = Array.prototype.slice.call(document.querySelectorAll('div'));
divs.forEach((div, i)=>div.addEventListener('click', function(){
  console.log('Hello from block #' + i)
}))

2. Один обработчик на документ, который слушает все клики, и выбирает из них те, что были по дивам.

document.addEventListener('click', function(evt){
  if (evt.target.tagName == 'DIV') {
    var i = divs.indexOf(evt.target)
    console.log('Hello from block #' + i)
  }
})

Comments

[Exploding]

Автор немного другое имеет ввиду. При клике на блок он не знает как идентифицировать этот блок.

[Stalker_RED]

Exploding: Я дополнил уже.

[Exploding]

Stalker_RED: внутренний голос говорит, что не надо было такой сложный код давать:)
onclick в данном случае был бы самый оптимальный вариант с учётом заботы о тостере и его обитателях))

[Stalker_RED]

Exploding: никто не мешает вам переписать это с onclick.
Он только кажется сложным из-за длинных ванильных методов.

так проще?

$('div').forEach((div, i)=>div[on]('click', function(){
  console.log(`Блок номер ${i} передает привет`)
})) 

// вспомогательная фигня
var $ = q=>Array.prototype.slice.call(document.querySelectorAll(q)),
    on = 'addEventListener'

[Exploding]

Я имел ввиду onclick как атрибут тега))
<div id="d_1" onclick="what_is_this()"></div>

function what_is_this(){
   alert(this.id);
}

[Stalker_RED]

Exploding: Вы серьезно так у себя делаете? Мне жаль.

[Exploding]

Stalker_RED: Нет конечно:)))) Хотя когда-то давным-давно когда только начинал учиться, да и jq еще не придумали - делал и так. Да все так делали в начале, чего уж тут...