The JavaScript mouse wheel event serves as the mechanism for navigating through HTML web pages. The mouse listener employs the onmousewheel function to enable functionality in response to the movement of the mouse wheel. When the mouse wheel is scrolled either up or down, it triggers the mouse wheel function through JavaScript, allowing for seamless navigation across the web page.
The "onmousewheel" event is available, but it has been deprecated in JavaScript. Instead, it is advisable to utilize the "onwheel" event attribute as a replacement for the "onmousewheel" event.
Syntax
The syntax provided utilizes the "onmousewheel" function to display the event related to the mouse wheel.
<div id = "demoDIV" onmousewheel = "function_name()"> </div>
<script>
function function_name(){
//write code here!
}
</script>
The syntax provided below demonstrates the mouse wheel event by utilizing the "mouse wheel" function in conjunction with the addEventListener method.
<script>
window.addEventListener("mouse wheel", function_name);
</script>
Examples
The subsequent examples illustrate the mouse wheel event utilizing various methods and functions.
Example 1: The subsequent illustration demonstrates a fundamental mouse wheel event utilizing JavaScript. This event can be applied to the HTML tag along with a designated function. The function alters the font size and color in response to the activation of the mouse wheel event.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Mouse Wheel Method </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> JavaScript Mouse Wheel Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmousewheel = "demoDIVFunction()">
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouseListner uses the mouse wheel function to get the functionality after rolling the mouse. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript.
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "blue";
}
</script>
</body>
</html>
Output:
The illustration displays the output page generated by the active mouse wheel events.
Example 2: The subsequent illustration demonstrates the utilization of the mouse wheel event. The JavaScript code employs the "mousewheel" event in conjunction with the addEventListener method.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Mouse Wheel Method </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> JavaScript Mouse Wheel Method </h2>
<b> The mouse wheel rolls anywhere on the web page. </b>
<p id = "datas"> </p>
<div id = "demoDIV">
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript.
</div>
<script>
window.addEventListener("mousewheel", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with addEventListener!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "blue";
}
</script>
</body>
</html>
Output:
The illustration displays the output page for the activated mouse wheel events.
Example 3: The subsequent example demonstrates the utilization of the mouse wheel event. The JavaScript employs the "onmousewheel" event in conjunction with the corresponding JavaScript handler.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Mouse Wheel Method </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body>
<h2> JavaScript Mouse Wheel Method </h2>
<b> The mouse wheel rolls bordered container on the web page. </b>
<p id = "datas"> </p>
<div id = "demoDIV">
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript.
</div>
<script>
var demoObj = document.getElementById("demoDIV");
demoObj.onmousewheel = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with javascript handler!!!";
document.getElementById("demoDIV").style.fontSize = "20px";
document.getElementById("demoDIV").style.color = "blue";
}
</script>
</body>
</html>
Output
The illustration displays the output page for the triggered mouse wheel events.
Example 4:
The subsequent illustration demonstrates the use of the onwheel event in conjunction with the handler function applied to the body element. As we utilize the mouse wheel to scroll through the web page, the style tag is modified and rendered according to the specifications outlined in the handler.
<!DOCTYPE html>
<html>
<head>
<title> JavaScript Mouse Wheel Method </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: red;
}
</style>
</head>
<body id = "demoDIV">
<h2> JavaScript Mouse Wheel Method </h2>
<b> The mouse wheel rolls anywhere on the web page. </b>
<p id = "datas"> </p>
<div>
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouse rolls up or down the web page and starts to operate the mouse wheel function using javascript.
</div>
<script>
window.addEventListener("mousewheel", demoDIVFunction);
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with addEventListener!!!";
document.getElementById("demoDIV").style.height = "255px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "3px dotted red";
}
</script>
</body>
</html>
Output
The illustration displays the output page for mouse wheel events that have been activated.
Conclusion
The "onmousewheel" event handler is utilized for handling mouse wheel actions; however, modern browsers have phased out support for this event. For mouse wheel interactions, we can still rely on the legacy versions of browsers that support this functionality.