In JavaScript, events are actions that happen in an app. They’re triggered by various things like inputs being entered, forms being submitted, 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 mouseenter and mouseleave events.
onmouseenter
The mouseenter event is fired when a pointing device like a mouse is moved over the element that has the onmouseenter event listener function assigned to it. It’s similar to the mouseover event, but the mouseenter event doesn’t bubble and it isn’t sent to the descendants when the pointer is moved from one of element’s descendant’s physical space to its own physical space.
This means that the mouseenter event is fired whether the mouse moves to another element no matter where it is in the hierarchy. Therefore, the mouseenter 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 mouseover event.
When combined with the mouseleave event, which is fired when the mouse leaves an element, the mouseenter event acts in a way that’s very similar to the CSS :hover pseudo-class.
For example, we can use it to create a peeping effect on an image where we show a part of an image when the mouse pointer hovers over a part of an image.
First, we add the HTML code for the image and a black box for hiding the image. Also, we add a circle div element to show part of the image that we hover over. To do this, we put in the following code:
<div class='container'>
<div class="view" hidden></div>
<img src='https://images.unsplash.com/photo-1503066211613-c17ebc9daef0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1500&q=80'></div>
The .container div is added for showing the black box for covering up the image. The .view div is the circle for us to have the peeping effect to reveal part of the image as we hover over it, and the img element has the image itself.
Next, we add the CSS code to style div elements like we just described by adding the following CSS code:
.container {
background: black;
width: 500px;
}.view {
position: absolute;
width: 200px;
height: 200px;
background: white;
border-radius: 50%;
}img {
mix-blend-mode: darken;
width: 500px;
}
Then finally, we add the JavaScript code to do what we just described:
const img = document.querySelector('img');
const view = document.querySelector('.view');
const container = document.querySelector('.container');
const showView = (event) => {
view.removeAttribute('hidden');
view.style.left = event.clientX - 50 + 'px';
view.style.top = event.clientY - 50 + 'px';
event.preventDefault();
}
const moveView = (event) => {
view.style.left = event.clientX - 50 + 'px';
view.style.top = event.clientY - 50 + 'px';
}
container.onmousemove = moveView;
container.onmouseenter = showView;
In the code above, we get the .container element by using the querySelector method. We do the same with the img and .view elements. Once we did that, we write the event handler functions.
The onmouseenter property of the .container div element is set to the showView function, which is runs when the mouse button is down. Inside the function, we remove the hidden attribute from the .view div element to reveal the image underneath the div . From the event parameter, which has the Event object, we get the clientX and clientY properties, which has the mouse coordinates of the click location. We set that to the position of the view DOM object which represents the .view element. Then we called event.preventDefault() to stop the default action since we already did the revealing with the code before it.
The onmousemove event handler of the .container div element is set to the moveView function, which handles the mousemove event. The event is fired when the mouse moves. In the function, we set the .view element to the position of where the mouse pointer is currently located, again with the clientX and clientY properties of the event parameter, which is the MouseEvent object.
Once we did all that, when we hover our mouse over the black box, then we reveal that part of the image underneath.
onmouseleave
The onmouseleave property of a DOM element lets us assign an event handler to handle the mouseleave event. The event is fired when the pointing device like a mouse is moved off the element that has the listener attached.
This means that the mouseleave event is fired whether the mouse moves to another element no matter where it is in the hierarchy. Therefore, the mouseleave 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.onmouseleave = () => {
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 mouseleave 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 onmouseleave 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.onmouseleave = () => {
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 mouseenter event is fired when a pointing device like a mouse is moved over the element that has the onmouseenter event listener function assigned to it. It’s similar to the mouseover event, but the mouseenter event doesn’t bubble and it isn’t sent to the descendants when the pointer is moved from one of the element’s descendant’s physical space to its own physical space.
The onmouseleave property of a DOM element lets us assign an event handler to handle the mouseleave event. The event is fired when the pointing device like a mouse is moved off the element that has the listener attached.
We can use event handler functions for both events to do various things like showing and hiding items when the mouse pointer is over something or not.
