Как выбрать все элементы в DOM и сделать их кликабельными

313

20 июля 2017, 01:31

Доброго времени суток. Нужна помощь Есть таблица, хочу каждый элемент сделать кликабельным Вот так работает :

var variable = document.getElementById('test');

Но кликабельным получается только первый элемент естественно

variable.addEventListener("click", showNumber);

Пытаюсь так чтобы все:

var variable = document.getElementsByTagName('td');
var variable = document.querySelectorAll('.class');
variable.addEventListener("click", showNumber);

Не получается.

Answer 1

querySelectorAll и getElementsByTagName возвращают коллекции, следовательно, чтобы назначить обработчик, нужно пройтись по всей коллекции и назначить его каждому элементу, например:

var variables = document.querySelectorAll('.class');
[].forEach.call(variables, function(variable){
    variable.addEventListener("click", showNumber);
});

Answer 2

Cобытия клика «пузырьками» поднимаются наверх: от <td> к <tr> и <table>. Может, просто ловить события клика у <table> – и определять оригинального инициатора клика?

var table = document.getElementById('e-table'), 
  out = document.getElementById('out'); 
 
table.addEventListener('click', function(e){ 
  if( e.target.tagName !== 'TD') return; // ждём клика по <td> 
  out.innerHTML = e.target.innerHTML; 
});

body{font-family:Helvetica,Arial,sans-serif;} 
td{border:1px solid #CCC; cursor:pointer; width:15px;height:15px; text-align:center} 
#out{padding:5px;width:60px;height:40px;background-color:#CCC;text-align:center}

<table id="e-table"> 
  <tr> <td>1</td> <td>2</td> <td>3</td> </tr> 
  <tr> <td>A</td> <td>B</td> <td>C</td> </tr> 
  <tr> <td>.</td> <td>..</td> <td>...</td> </tr> 
</table> 
<div id="out"></div>