Ванильный JavaScript связывает событие mouseout

Question

НЕТ JQUERY!!!!!!

Мне нужно написать это на чистом JS. У меня есть куча элементов на временной шкале календаря, некоторые из которых связаны с помощью invoice_id, поэтому я хочу добавить класс наведения ко всем соответствующим элементам класса, когда мышь наведена на один из них, а затем удалить класс наведения мыши при наведении мыши.

У меня на мыши над частью все работает нормально, но я изо всех сил пытаюсь заставить событие мыши работать.

вот мой 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??
}

У меня есть аналогичный скрипт, выполняющий jQuery, который делает именно это, но в этом сценарии я не могу использовать jQuery.

Версия jQuery выглядит так:

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

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

ИЗМЕНЕНО после ответа:

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

Это то, что вы ищете?

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