The mouseenter event in JavaScript is utilized on a web page to detect when the mouse pointer enters or exits an element via a JavaScript event. Typically, the mouseenter event is paired with the mouseleave event; without this pairing, the pointer may trigger continuously. These JavaScript events serve as more straightforward alternatives to the mouseover and mouseout functions.
Syntax
The syntax below illustrates the function for the mouse pointer entering an element in JavaScript, referred to as the mouseenter event.
<div id = "demo" onmouseenter = "function_name()"> </div>
<script>
function function_name(){
//write code here.
}
</script>
The subsequent syntax illustrates the mouse leave (mouseleave) event function associated with JavaScript mouse events.
<div id = "demo" onmouseleave = "function_name()"> </div>
<script>
function function_name(){
//write code here.
}
</script>
Supporting Browsers
The mouseenter and mouseleave events function supports many browsers. The mouse event function in javascript supports the following browsers.
- Crome
- Edge
- Firefox
- Opera
- Safari
Examples
The illustrations demonstrate the usage of mouseenter and mouseleave events through various techniques and event handling methods.
Example 1
The mouseenter events function effectively in the example that utilizes an HTML tag along with a JavaScript function.
<!DOCTYPE html>
<html>
<head>
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas1 {
color: red;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<b> Javascript Mouseenter event Example </b>
<p id = "demoVal" onmouseenter = "demoFunction(event)"> The mouseenter function works to enter the mouse pointer on the web page </p>
<p id = "datas1"> </p>
<div id = "datas">
</div>
<script>
function demoFunction(event) {
var button_val = event.button;
document.getElementById("datas1").innerHTML = "Mouseenter event values : "+button_val;
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
document.getElementById("demoVal").style.width = "350px";
document.getElementById("demoVal").style.border = "dotted navy";
}
</script>
</body>
</html>
Output
The output illustrates the operation of mouseenter events occurring on the webpage.
Example 2
The mouseenter events function effectively in the provided example that utilizes an HTML element alongside a JavaScript function. Through this event, it is possible to modify the style properties of the div element using the JavaScript code.
<!DOCTYPE html>
<html>
<head>
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas1 {
color: red;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<b> Javascript Mouseenter event Example </b>
<p id = "demoVal" onmouseenter = "demoFunction(event)"> The mouseenter function works to enter the mouse pointer on the web page </p>
<span id = "datas1" style=''>😄</span>
<span id = "datas2" style=''>🤓</span>
<div id = "datas"> </div>
<script>
function demoFunction(event) {
var button_val = event.button;
document.getElementById("datas1").style.fontSize = "50px";
document.getElementById("datas2").style.fontSize = "80px";
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
document.getElementById("demoVal").style.width = "350px";
document.getElementById("demoVal").style.border = "dotted navy";
}
</script>
</body>
</html>
Output
The displayed result demonstrates the operation of mouseenter events within the web page.
Example 3
The mouseenter events function as demonstrated in the example that utilizes an HTML tag along with a JavaScript function. Each time the mouse enters the designated area, the mouseenter function allows us to change the background color to a random hue.
<!DOCTYPE html>
<html>
<head>
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas1 {
color: red;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<b> Javascript Mouseenter event Example </b>
<p id = "demoVal" onmouseenter = "demoFunction(event)"> The mouseenter function works to enter the mouse pointer on the web page </p>
<p id = "datas1"> </p>
<div id = "datas">
</div>
<script>
function demoFunction(event) {
var button_val = event.button;
document.getElementById("datas1").innerHTML = "Mouseenter event values : "+button_val;
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
document.getElementById("demoVal").style.width = "350px";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoVal").style.backgroundColor = color;
}
</script>
</body>
</html>
Output
The output demonstrates the functionality of mouseenter events on the web page.
Example4
The illustration demonstrates the utilization of the mouseleave event in conjunction with the mouseenter event within the HTML element. By leveraging the mouseenter event, we can modify the emoji along with the dimensions and color of the div tag, while the mouseleave event allows us to revert the styles back to their original state.
<!DOCTYPE html>
<html>
<head>
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
width:350px;
}
#datas1 {
color: red;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<b> Javascript Mouseleave event Example </b>
<p id = "demoVal" onmouseenter = "demoFunction()" onmouseleave = "demoFunction2(event)">
the mouseenter function works to enter the mouse pointer on the web page.
the mouseleave function works to remove the mouse pointer on the web page </p>
<span id = "datas1" style='font-size:50px;'>?</span>
<span id = "datas2" style='font-size:50px;'>?</span>
<div id = "datas"> </div>
<script>
function demoFunction() {
document.getElementById("datas1").style.fontSize = "20px";
document.getElementById("datas2").style.fontSize = "20px";
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
document.getElementById("demoVal").style.fontSize = "20px";
document.getElementById("demoVal").style.color = "green";
document.getElementById("demoVal").style.border = "dotted navy";
}
function demoFunction2() {
document.getElementById("datas1").style.fontSize = "50px";
document.getElementById("datas2").style.fontSize = "50px";
document.getElementById("datas").innerHTML = "JavaScript Mouseleave function activates successfully!!!";
document.getElementById("demoVal").style.fontSize = "12px";
document.getElementById("demoVal").style.color = "black";
}
</script>
</body>
</html>
Output
The result demonstrates the implementation of mouseenter events on the website.
Example5
The example illustrates the interaction between the mouseleave event and the mouseenter event when utilizing the addEventListener method. These specific events engage with the mouseleave and mouseenter functions, allowing for modifications to the style attributes. Through these events, the background color is altered and reset accordingly.
<!DOCTYPE html>
<html>
<head>
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
width:350px;
}
#datas1 {
color: red;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<p id = "demoVal">
The mouseenter function works to enter the mouse pointer on the web page.
The mouseleave function works to remove the mouse pointer on the web page </p>
<span id = "datas1" style='font-size:50px;'>?</span>
<span id = "datas2" style='font-size:50px;'>?</span>
<div id = "datas"> </div>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.addEventListener("mouseenter", demoFunction);
//use mouseenter event with handler name
function demoFunction() {
document.getElementById("datas1").style.fontSize = "20px";
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoVal").style.backgroundColor = color;
}
//use mouseleave event with handler name
demoObj.addEventListener("mouseleave", demoFunction2);
function demoFunction2() {
document.getElementById("datas1").style.fontSize = "50px";
document.getElementById("datas").innerHTML = "JavaScript Mouseleave function activates successfully!!!";
document.getElementById("demoVal").style.backgroundColor = "white";
}
</script>
</body>
</html>
Output
The output demonstrates the operational capabilities of mouseenter events on the webpage.
Example6
The illustration demonstrates the interaction between the mouseleave event and the mouseenter event within an HTML element. It is possible to utilize the same handler name as the identifier. The mouseenter event modifies a specific emoji and eliminates the styling applied to that same emoji.
<!DOCTYPE html>
<html>
<head>
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
width:350px;
}
#datas1 {
color: red;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<p id = "demoVal">
the mouseenter function works to enter the mouse pointer on the web page
the mouseleave function works to remove the mouse pointer on the web page </p>
<div id = "container">
<span id = "datas1" onmouseenter = "demoFunction(this.id)" onmouseleave = "demoFunction2(this.id)" style='font-size:20px;'>😲</span>
<span id = "datas2" onmouseenter = "demoFunction(this.id)" onmouseleave = "demoFunction2(this.id)" style='font-size:20px;'>😁</span>
<span id = "datas3" onmouseenter = "demoFunction(this.id)" onmouseleave = "demoFunction2(this.id)" style='font-size:20px;'>😀</span>
<span id = "datas4" onmouseenter = "demoFunction(this.id)" onmouseleave = "demoFunction2(this.id)" style='font-size:20px;'>😂</span>
</div>
<div id = "datas"> </div>
<script>
//use mouseenter event with handler name
function demoFunction(events) {
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
document.getElementById(events).style.backgroundColor = "green";
document.getElementById(events).style.fontSize = "50px";
}
//use mouseleave event with handler name
function demoFunction2(events) {
document.getElementById(events).style.backgroundColor = "white";
document.getElementById(events).style.fontSize = "20px";
document.getElementById("datas").innerHTML = "JavaScript Mouseleave function activates successfully!!!";
}
</script>
</body>
</html>
Output
The displayed output illustrates the functionality of mouseenter events within the webpage.
Conclusion
The mouseenter and mouseleave events operate concurrently to enhance the advanced and animated user interface of the webpage. This functionality simplifies the development process for programmers and improves the experience for users engaging with mouse-related features.