Aggiungi il listener di eventi agli elementi DOM in base alla class

Ho una tabella, dove ogni tr e td hanno solo classi, ho un problema con la selezione di td element che ha la class di cui ho bisogno
HTML:

 
1
2

Quando mouseover td con class="cell" devo ottenere del testo tra td su cui il mio mouse e fare qualcosa con questo. Questo dovrebbe essere fatto con puro JavaScript, senza framework. Provai:

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

Non funziona, o forse ho fatto degli errori?

 document.querySelector('.cell'); 

Selezionerà solo il primo elemento che ha class='cell' .

Per aggiungere listener di eventi a tutti questi elementi, usa querySelectorAll()

che restituirà un NodeList ( una sorta di array di elementi DOM inattivi ) con class='cell' . È necessario eseguire iterazioni su di esso o accedere a un elemento utilizzando l’indice.

Per esempio qualcosa di simile

 var cell =document.querySelectorAll('.cell'); for(var i=0;i 

controlla questo violino

Preferirei usare la delega degli eventi per questo.

 document.getElementById('your-table').addEventListener('mouseover', function (e) { var t = e.target; if (t.classList.contains('cell')) { console.log(t.textContent); } }); 

Tuttavia “Non funziona, o forse ho fatto degli errori?”

  • querySelector restituisce un singolo elemento.
  • cell.addEventListener('mouseover',callback() , qui callback() chiama subito la funzione di callback e non è quello che cell.addEventListener('mouseover',callback() passare il riferimento alla funzione in modo da rimuovere the () .

Si noti che anche se si utilizza querySelectorAll che restituisce un elenco di nodes, non implementa il pattern Composite in modo che non si possa trattare un elenco come un singolo elemento come si farebbe con un object jQuery.

La maggior parte degli ambienti js moderni ora supporta … dell’iterazione, quindi ora puoi fare questo:

 for (var cell of document.querySelectorAll('.cell')) { cell.addEventListener('mouseover',callback,false); } 

Questo potrebbe funzionare anche su una singola riga:

  document.querySelectorAll('.cell').map(cell=>cell.addEventListener('mouseover', callback, false));