JavaScript 鼠标滚轮事件

鼠标在网页上滚动，通过使用”onwheel” javascript来操作鼠标滚轮功能。

我们可以使用”onmousewheel”事件，但它在javascript中已经废弃了。我们可以使用javascript中的”onwheel”属性来代替”onmousewheel”事件。

语法

以下语法使用”onwheel”函数来显示鼠标滚轮事件。

<div id = "demoDIV" onwheel = "function_name()"> </div>
<script>
function function_name(){
//write code here!
}
</script>

以下语法显示了使用addEventListener事件的”wheel”函数的鼠标滚轮事件。

<script>
window.addEventListener("wheel", function_name);
</script>

示例

这些示例描述了使用不同功能的onwheel鼠标事件。

示例1：

下面的示例展示了使用javascript的基本滚轮事件。我们可以在html标签上使用该事件，并且使用函数。当鼠标滚轮事件触发时，函数会改变字体大小和颜色。

<!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 (onwheel) Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onwheel = "demoDIVFunction()">
The javascript mouse wheel event is the mouse event to navigate the html web page. The mouseventlistner 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 onwheel Method activates successfully!!!";
  document.getElementById("demoDIV").style.fontSize = "25px";
  document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "1px solid black";
}
</script>
</body>
</html>

输出

该图片显示了激活的鼠标滚轮事件输出页面。

JavaScript 鼠标滚轮事件

示例2：

以下示例使用鼠标的”onwheel”事件。JavaScript使用”wheel”事件与addEventListner方法。

<!DOCTYPE html>
<html>
<head> 
<title>  JavaScript Mouse Wheel (onwheel) Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body>
<h2>  JavaScript Mouse Wheel (onwheel) 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("wheel", 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";
document.getElementById("demoDIV").style.border = "1px solid black";
}
</script>
</body>
</html>

输出

该图像显示了鼠标滚轮激活的事件输出页面。

JavaScript 鼠标滚轮事件

示例3：

下面的示例使用鼠标滚轮事件。Javascript使用”onwheel”事件和javascript处理程序。

<!DOCTYPE html>
<html>
<head> 
<title> JavaScript Mouse Wheel (onwheel) Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body>
<h2> JavaScript Mouse Wheel (onwheel) 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.onwheel = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with javascript handler!!!";
  document.getElementById("demoDIV").style.fontSize = "18px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "1px solid black";
}
</script>
</body>
</html>

输出

该图像显示了激活的鼠标滚轮事件输出页面。

JavaScript 鼠标滚轮事件

示例4：

以下示例在body标签上使用onwheel和处理函数。当我们在网页上滚动滚轮时，样式标签会根据处理函数的指示进行更改并显示出来。

<!DOCTYPE html>
<html>
<head> 
<title> JavaScript Mouse Wheel (onwheel) Method </title>
<style>
#demoDIV {
  border: 1px solid black;
}
#datas {
  color: red;
}
</style>
</head>
<body id = "demoDIV">
<h2> JavaScript Mouse Wheel (onwheel) Method </h2>
<b> The mouse wheel rolls bordered container on the body tag. </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>
var demoObj = document.getElementById("demoDIV");
demoObj.onwheel = demoDIVFunction;
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Wheel Method with javascript handler!!!";
  document.getElementById("demoDIV").style.height = "255px";
document.getElementById("demoDIV").style.color = "blue";
document.getElementById("demoDIV").style.border = "3px dotted red";
}
</script>
</body>
</html>

输出

该图显示了激活的鼠标滚轮事件输出页面。

JavaScript 鼠标滚轮事件