JavaScript onmousewheel事件

JavaScript鼠标滚轮事件是用于在HTML网页上进行导航的鼠标事件。鼠标监听器使用鼠标滚轮（onmousewheel）函数，在滚动鼠标后获得功能。鼠标向上或向下滚动网页，并使用JavaScript开始操作鼠标滚轮函数。

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

语法

下面的语法使用”onmousewheel”函数来显示鼠标滚轮事件。

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

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

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

示例

以下示例展示了使用不同方法和函数的鼠标滚轮事件。

示例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 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>

输出：

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

JavaScript onmousewheel事件

示例2： 以下示例使用鼠标滚轮事件。JavaScript 使用 “mousewheel” 事件与 addEventListner 方法。

<!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>

输出：

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

JavaScript onmousewheel事件

示例3： 以下示例使用鼠标滚轮事件。Javascript使用”onmousewheel”事件和Javascript处理程序。

<!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>

输出

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

JavaScript onmousewheel事件

示例4：

以下示例在body标签上使用了onwheel属性和处理器函数。当我们在网页上滚动鼠标滚轮时，样式标签会根据处理器而改变并显示。

<!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>

输出

这张图片展示了激活的鼠标滚轮事件的输出页面。

JavaScript onmousewheel事件