Modeling Hangs Using JavaScript Events

Question

Is it possible to model hover using JavaScript events? I tried to insert a mouseover event on the target element, but no luck.

For example, if there is a link that has a hover selector, is it possible to “direct” it to use JavaScript events? Basically, I want to cause CSS hovering. You can assume that I cannot use jQuery.

Answer 1

The hQuery hover event simply uses the mouseenter and mouseleave . Here is the jQuery hover source:

 function (fnOver, fnOut) { return this.mouseenter(fnOver).mouseleave(fnOut || fnOver); } 

Answer 2

Yes, you would just add onMouseOver and onMouseOut events to the corresponding element

Like this:

 <div class="something" onmouseover="hover(this);" onmouseout="unhover(this);"> 

Then make your javascript change the element class (if you want two different CSS classes) or just change the element style directly. You could do something like this.

 <script> function hover(element) { element.setAttribute('class', 'something hover'); } function unhover(element) { element.setAttribute('class', 'something'); } </script> 

Please note that you can also use the jQuery library to handle this even easier.

Answer 3

Actually, a CSS hover event is more convenient than just binding these two events, mouseenter and mouseleave . Therefore, a little more effort is required that:

1.Click an item

2. Add a listener to the mouseenter event

3. Repeat step 1 , 2 again and restore the cloned item to mouseleave

Here is my working draft.

 function bindHoverEvent(element,listener){ var originalElement = element.cloneNode(true); element.addEventListener('mouseenter',listener); element.addEventListener('mouseleave',function(){ bindHoverEvent(originalElement,listener); this.parentNode.replaceChild(originalElement,this); }); } 

Note that cloneNode does not copy event listeners, so you need to manually rewrite events to the cloned element and all its children yourself.

Answer 4

You can model guidance using JavaScript events. I created a module for replacing images on hover. You can experiment and adapt the module according to your needs. For example, I made general image paths and DOM selection elements.

 // module for swapping out images on hover var imageSwap = (function ModuleFactory() { "use strict"; var imageContainer = document.getElementById("image-container"), image = document.getElementsByClassName("image")[0], imageSource1 = 'path/to/your/image1', imageSource2 = 'path/to/your/image2'; function handleImageSwap(e) { if (e.target.id === "image-container") { image.setAttribute("src", imageSource2); e.target.addEventListener("mouseleave", function _handler_() { image.setAttribute("src", imageSource1); e.target.removeEventListener("mouseleave", _handler_, false); }, false); } } function init() { imageContainer.addEventListener("mouseenter", handleImageSwap, false); } var publicAPI = { init: init }; return publicAPI; })(); document.addEventListener("DOMContentLoaded", imageSwap.init(), false);