JavaScript onwheel 鼠标事件

17 Mar 2025 | 4 分钟阅读

当鼠标在网页上向上或向下滚动时，通过使用 "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 展示了基本的 wheel 事件。我们可以在 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>

输出

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

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

输出

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

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

输出

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

示例 4

下面的示例在 body 标签上使用了带有处理程序函数的 onwheel。当我们滚动网页的滚轮时，style 标签会根据处理程序进行更改并显示。

<!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 中的 onwheel 事件用于滚动网页的滚轮。我们可以使用更高级的浏览器版本滚动页面和标签。

下一主题JavaScript 中的 Mouseout 事件

JavaScript onwheel 鼠标事件

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript onwheel 鼠标事件

语法

示例

结论

相关帖子

JavaScript 中的 NextSibling 属性

JavaScript insertAdjacentHTML() 方法

Vanilla JavaScript 是什么？

JavaScript onkeyup 事件

JavaScript classList

JavaScript 是如何工作的？

如何使用 JavaScript 选择所有复选框

JavaScript 中的 Hoisting 是什么？

JavaScript 中的 Promise 是什么？

JavaScript prepend() 方法

订阅 Tpoint Tech

联系信息

关注我们

教程