Vanille JavaScript binden ein mouseout Ereignis

Question

NO JQUERY !!!!!!

Ich muss dies in reinem JS schreiben. Ich habe eine Reihe von Elementen in einer Kalender-Timeline, einige sind mit invoice_id verknüpft, so dass ich allen übereinstimmenden Klassenelementen eine Hover-Klasse hinzufügen möchte, wenn die Maus über einer liegt, und dann die Hover-Klasse entfernen.

Ich habe die Maus über Teil alles funktioniert gut, aber ich kämpfe um die Maus aus Ereignis zu arbeiten.

hier ist meine 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?? 
} 

Ich habe ein ähnliches Skript jQuery ausgeführt wird, das dies tut genau, aber in diesem Szenario kann ich nicht jQuery verwenden.

Die jQuery-Version sieht wie folgt aus:

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

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

nach Antwort EDITED:

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

Ist das, was Sie suchen?

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