Vanilla JavaScript bind a mouseout event

Question

NO JQUERY!!!!!!

I need to write this in pure JS. I have a bunch of elements in a calendarr timeline, some are linked by invoice_id so I want to add a hover class to all the matching class elements when the mouse is hovered over one, and then remove the hover class on mouse out.

I have the on mouse over part all working fine, but am struggling to get the mouse out event to work.

here is my 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??
}

I have a similar script running jQuery that does exactly this, but in this scenario I cannot use jQuery.

The jQuery version looks like this:

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

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

EDITED after response:

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";
    });
}
}

***sigh*** You mean "pure DOM", not "pure JS". jQuery is a library, not a language. Whether you use the DOM or jQuery, the **language** (JavaScript) is the same. — T.J. Crowder, Aug 11 '17 at 11:33
This comes down to "How do I hook an event with the DOM?" The ***slightest*** bit of research would have found an answer to that question, here and all over the web. — T.J. Crowder, Aug 11 '17 at 11:35
@T.J Crowder. Thanks for that. I think the point is clear that I dont want to use any jQuery shorthand, instead pure JS. SIGH — Nick, Aug 11 '17 at 11:35
inside your for loop add: d[i].on('mouseout', function(){ //do what ever you want with it on mouseout }); — user5014677, Aug 11 '17 at 11:38
@user5014677 I have tried your suggestion, please see my revised question. I now get this error in console: d[i].on is not a function. TJcrowder - please don't offer me any of your advice unless it is constructive, your suggested duplicates are not exactly what I am looking for - go lurk elsewhere. — Nick, Aug 11 '17 at 18:30

score 2 · Answer 1 · answered Aug 11 '17 at 11:34

2

Is that what you're looking for?

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

answered Aug 11 '17 at 11:34

Tobias Glaus

3,008
3
18
37

Vanilla JavaScript bind a mouseout event

1 Answers1