Vanilla JavaScript lier un événement mouseout

Question

NO JQUERY !!!!!!

J'ai besoin d'écrire cela dans JS pur. J'ai un tas d'éléments dans une chronologie calendarr, certains sont liés par invoice_id, donc je veux ajouter une classe hover à tous les éléments de classe correspondants lorsque la souris est survolée sur un, puis supprimer la classe hover à la souris.

J'ai la souris sur une partie sur tout va bien travailler, mais me bats pour obtenir la souris sur l'événement pour travailler.

voici mon JS:

function highlightRange(id) 
{ 
var d = document.getElementsByClassName('invoiceCell' + id); // get all the elements 

d.className += "hover";           // add the hover class 

for (var i = 0; i < d.length; i++) {       // remove the hidden class 
    d[i].classList.remove('hidden'); 
} 

// now how to I bind the mouseout event?? 
} 

J'ai un script similaire en cours d'exécution jQuery qui fait exactement cela, mais dans ce scénario, je ne peux pas utiliser jQuery.

La version jQuery ressemble à ceci:

function highlightRange(id) 
{ 
$(".price_cell_"+id).addClass('hover'); 

$(this).bind("mouseout", function(){ 
    $(".price_cell_"+id).removeClass('hover'); 
}) 
} 

ÉDITÉ après réponse:

function highlightRange(id) 
{ 
var d = document.getElementsByClassName('invoiceCell' + id); // get all the elements 

d.className += "hover";           // add the hover class 

for (var i = 0; i < d.length; i++)        // remove the hidden class 
{ 
    d[i].classList.remove('hidden'); 

    d[i].on('mouseout', function(){ 
     d[i].classList.remove('hover'); 
     d[i].className += "hidden"; 
    }); 
} 
} 

Answer 1

Est-ce que vous cherchez?

object.addEventListener("mouseout", function(){ 
... 
});