In JavaScript, events are actions that happen in an app. They’re triggered by various things like inputs being entered, forms being submitted, and changes in an element like resizing, or errors that happen when an app is running, etc. We can assign an event handler to handle these events. Events that happen to DOM elements can be handled by assigning an event handler to properties of the DOM object for the corresponding events. In this article, we’ll look at the mousemove and mouseout events.
**onmousemove**
The onmousemove property of a DOM element is a property that lets us assign a function to handle the mousemove element. The mousemove event is fired when the user moves the mouse.
For example, we can use it to make tooltips that appear when we hover our mouse pointer over an element. First, we add some HTML code to add some p elements that’ll show a tooltip when we hover over it as we do in the following code:
<p><a href="#" data-tooltip="Tooltip 1" id='tooltip-1'>Tooltip 1</a></p>
<p><a href="#" data-tooltip="Tooltip 2" id='tooltip-2'>Tooltip 2</a></p>
Then in the CSS code, we put the styles for our tooltip:
.tooltip {
position: absolute;
z-index: 9999;
padding: 6px;
background: #ffd;
border: 1px #886 solid;
border-radius: 5px;
}
The tooltip class makes the tooltip div overlap with existing elements. It should show up near the mouse pointer after we set the position in the JavaScript code. Also we set the background color and the border for out tooltip.
Finally, we add the JavaScript code to show the tooltip once we assign our own onmousemove event handler function to it. We do this by adding the following code:
document.onmousemove = (event) => {
document.querySelectorAll('.tooltip').forEach(e => e.parentNode.removeChild(e));
const id = event.srcElement.id;
const node = document.createElement('div');
node.className = 'tooltip';
node.textContent = event.target.dataset.tooltip;
node.setAttribute('hidden', '');
node.style.left = event.clientX + 20 + 'px';
node.style.top = event.clientY + 10 + 'px';
document.body.appendChild(node);
if (id == 'tooltip-1' || id == 'tooltip-2') {
node.removeAttribute('hidden');
}
}
In our event handler function for the mousemove event, which we assigned to the onmousemove property of document , we get all the existing elements with the class tooltip so that we can remove them from the screen.
Then we create the tooltip by creating a div element with the createElement method . Then we set it to the tooltip class by setting the className property of node . Next, we get the value of the data-tooltip attribute then set it to the textContent property of node . And then we set the hidden attribute of the div.tooltip element which we just created. Then we set the left and top position to clientX + 20 pixels and clientY + 10 pixels. clientX and clientY are the X and Y coordinates of the mouse pointer’s current location, so that we can use that to position the tooltip near our mouse pointer.
Then if the id that the mouse hovered over is of ID tooltip-1 or tooltip-2 , then we remove the hidden attribute from the div.tooltip element which we just created and show the tooltip.
Once we did that, we should see tooltips when we hover either of the links.
**onmouseout**
The onmouseout property is a property of a DOM element where we can assign an event handler to an event handler function to process mouseout events. The mouseout event fires when the mouse leaves an element, such as when the mouse moves off an image, then the mouseout event is fired for that image element.
The mouseout event is fired whether the mouse moves to another element no matter where it is in the hierarchy, while the mouseout event propagates down to the descendants of the originating element. Therefore, the mouseout event may be fired many times, which can cause significant performance problems. If we need to listen to events in the whole element tree when the mouse is over a big element with lots of descendants, then it’s better to use the mouseout event.
For example, we can use it to track whether the mouse is over an element or not. First, we add an HTML div element as we do in the following code:
<div id='log'></div>
Then we add some CSS to add a border on the div and resize it:
#log {
width: 300px;
height: 150px;
border: 1px solid black;
}
Finally, we can add the following JavaScript code to set different text depending on whether the mouse is over the log div or not:
const log = document.getElementById('log');
log.onmouseover = () => {
log.textContent = 'Mouse over'
}
log.onmouseout = () => {
log.textContent = 'Mouse left'
}
Once we did that, we should see the ‘Mouse over’ message in the box when our mouse is over the box and ‘Mouse left’ when our mouse pointer left the box.
Another example of using the mouseout event is for showing different images depending on whether our mouse is over an image element or not. We just have the change the HTML as we do in the following code:
<img src='https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80' >
Then the CSS we change to the following:
img {
width: 300px;
}
Finally, in the JavaScript code, we change the src of the img element in the onmouseover and onmouseout event handler functions as we do in the following code:
const img = document.querySelector('img');
img.onmouseover = () => {
img.src = 'https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80'
}
img.onmouseout = () => {
img.src = 'https://images.unsplash.com/photo-1546182990-dffeafbe841d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=740&q=80'
}
After that, we’ll get different images as we hover our mouse over or leave the img element.
The onmousemove property of a DOM element is a property that lets us assign a function to handle the mousemove element. The mousemove event is fired when the user moves the mouse.
The onmouseout property is a property of a DOM element where we can assign an event handler to an event handler function to process mouseout events. The mouseout event fires when the mouse leaves an element, such as when the mouse moves off an image, then the mouseout event is fired for that image element.
The mouseout event is fired whether the mouse moves to another element no matter where it is in the hierarchy, while the mouseout event propagates down to the descendants of the originating element. Therefore, the mouseout event may be fired many times, which can cause significant performance problems. If we need to listen to events in the whole element tree when the mouse is over a big element with lots of descendants, then it’s better to use the mouseout event.
