JavaScript onmousewheel 事件

2025年3月18日 | 阅读时长 4 分钟

JavaScript mouse wheel 事件是用于导航 HTML 网页的鼠标事件。mouseListner 使用 mouse wheel (onmousewheel) 函数在滚动鼠标后获取功能。当用户向上或向下滚动鼠标滚轮时，JavaScript 会开始调用 mouse wheel 函数。

我们可以使用 "onmousewheel" 事件，但它在 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>

输出

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

示例 2：以下示例使用鼠标滚轮事件。JavaScript 使用 addEventListner 方法来处理 "mousewheel" 事件。

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

输出

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

示例 3：以下示例使用鼠标滚轮事件。JavaScript 使用 JavaScript 处理程序来处理 "onmousewheel" 事件。

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

输出

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

示例 4

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

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

输出

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

结论

"onmousewheel" 函数用于处理鼠标滚轮事件，但高级浏览器已弃用该事件。我们可以为旧版本浏览器使用鼠标滚轮事件。

下一主题JavaScript onkeyup 事件

JavaScript onmousewheel 事件

语法

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 onmousewheel 事件

语法

示例

结论

相关帖子

JavaScript Time Now

JavaScript 函数用于检查数组是否为空

Javascript Async Generator 函数

如何使用 JavaScript 方法移除事件处理程序

Mouseout 事件在 javascript 中的用法

文本到粒子溶解效果 JavaScript 和 CSS

Npm uninstall 命令

移除数组中的重复项

JavaScript 代码编辑器

如何检查 JavaScript 中的空对象

订阅 Tpoint Tech

联系信息

关注我们

教程