Add event listener to DOM elements based on class

Question

I have a table, where each tr and td have only classes, I have a problem with selection of td element having the class I need
HTML:

<table>
 <tr class="data">
  <td class="cell">1</td>
  <td class="cell2"></td>
 </tr>
 <tr class="data">
  <td class="cell">2</td>
  <td class="cell2"></td>
 </tr>
</table>

When mouseover td with class="cell" I have to get text between td on which my mouse and do something with this. This should be done with pure JavaScript, without frameworks. I tried:

var cell = document.querySelector('.cell');

function callback(){ //do something }
cell.addEventListener('mouseover',callback(),false);

It doesn't work, or maybe I did mistakes?

Answer 1

The following will only select the first element with class='cell'.

document.querySelector('.cell');

For adding event listener to all such elements, use querySelectorAll(), which will return a NodeList (a kind of array of inactive DOM elements) having class='cell'. You need to iterate over it or access specific element using it's index.

For example:

var cells = document.querySelectorAll('.cell');
cells.forEach(cell => cell.addEventListener('mouseover', callback, false));

Check this fiddle