Mouseout 事件在 javascript 中的用法

17 Mar 2025 | 5 分钟阅读

当鼠标光标移出 HTML 元素时，会触发 onmouseout 事件，并执行用户定义的函数。此函数在用户元素上运行。当鼠标光标移出 HTML 标签和 div 信息时，会触发 mouseout 事件。mouseout 函数通过 mouseout 函数来禁用函数。例如，可以使用 onmouseout 事件来高亮显示链接，并通过 mouseout 事件来移除链接高亮显示。

语法

以下语法以不同的格式和不同的事件使用 JavaScript。

语法 1： 以下语法在 HTML 标签和 JavaScript 函数上使用。 "onmouseout" 函数在 script 标签或不同的脚本页面上运行。

<html>
<body>
<p onmouseout = "handler_name()">
</p>
<script>
// defining the function of the handler name
function handler_name()
{
//user-defined Js function
}
</script>
</body>
</html>

语法 2： 以下语法在 JavaScript 标签及其函数中为 "onmouseout" 事件工作。我们可以通过 id 或 class 使用 HTML 元素的实例。

<script>
object.onmouseout = handler_name() {
//user-defined Js function
};
</script>

语法 3： 以下语法使用 addEventListener 事件和 mouseout 函数，采用 JavaScript。

<script>
object.addEventListener("mouseout", handler_name);
// user defined function script
function handler_name()
{
//user-defined Js function
}
</script>

JavaScript Onmouseout 事件参数

onmouseout 事件接受单个参数。我们可以使用函数名，这是必不可少的。
函数名：onmouseout 事件与函数名一起工作。处理程序/函数包含 mouse-out 事件的用户定义操作。

JavaScript 的 Onmouseout 事件返回值

不返回值。Onmouseove 事件不显示任何输出数据。它显示具有函数验证的用户定义网页。
我们可以通过用户定义的 HTML 函数样式和验证来确认事件函数。

支持的浏览器

鼠标事件函数支持多种浏览器。"mouseout" 函数支持以下浏览器。

Chrome
边
火狐
Opera
Safari
IE

示例

以下示例以不同方式和各种事件展示了 mouseout 函数。

示例 1

以下示例展示了在 HTML 标签和处理程序事件上使用 mouse-out 函数的 mouseout 事件。

<!DOCTYPE html>
<html>
<head>
<title> Mouseout function in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
}
#datas {
color: gree;
}
</style>
</head>
<body>
<h2> JavaScript Mouse out Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmouseover = "demoDIVFunction()" onmouseout = "demoOutFunction()" >
The javascript mouse-out event works after removing the pointer on the particular tag. It is a mouse event to handle functionality to disable the mouseout function.
</div>
<script>
function demoDIVFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse Out Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "18px";
document.getElementById("demoDIV").style.color = "red";
}
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse out Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "12px";
document.getElementById("demoDIV").style.color = "black";
}
</script>
</body>
</html>

输出

该图片显示了已激活的 mouseout 事件输出页面。

示例 2

我们可以使用具有 mouseover 和 mouseout 函数的元素实例来更改特定的信息容器。

<!DOCTYPE html>
<html>
<head>
<title> Mouseout and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body id = "demoVal">
<h2> JavaScript Mouse out Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV">
The javascript mouse-out event works after removing the pointer on the particular tag. It is a mouse event to handle functionality to disable the mouseout function.
</div>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.onmouseover = demoOverFunction;
demoObj.onmouseout = demoOutFunction;
function demoOverFunction () {
document.getElementById("datas").innerHTML = "JavaScript Mouse Over Method activates successfully!!!";
document.getElementById("demoDIV").style.backgroundColor = "black";
document.getElementById("demoDIV").style.color = "white";
}
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse out Method activates successfully!!!";
document.getElementById("demoDIV").style.backgroundColor = "";
document.getElementById("demoDIV").style.color = "black";
}
</script>
</body>
</html>

输出

该图片显示了已激活的 mouseout 事件输出页面。

示例 3

在给定的示例中，mouseout 事件使用 JavaScript 函数的 addEventListener 事件进行工作。我们可以使用 mouseout 函数更改随机的背景和字体颜色，并且在 mouseover 函数之后显示基本标签。

<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body id = "demoDIV">
<h2> Mouseout evnets in JavaScript </h2>
<div id = "demoVal">
The javascript mouse-out event works after removing the pointer on the particular tag. It is a mouse event to handle functionality to disable the mouseout function.
</div>
<p id = "datas"> </p>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.addEventListener("mouseout", demoOutFunction);
demoObj.addEventListener("mouseover", demoOverFunction);
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseout function activates successfully!!!";
document.getElementById("demoVal").style.color = "yellow";
document.getElementById("demoVal").style.fontSize = "18px";
document.getElementById("demoVal").style.backgroundColor = "navy";
}
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
document.getElementById("demoVal").style.color = "black";
document.getElementById("demoVal").style.fontSize = "";
document.getElementById("demoVal").style.backgroundColor = "";
}
</script>
</body>
</html>

输出

该图片显示了已激活的 mouseout 事件输出页面。

示例 4

在给定的示例中，mouseover 和 mouseout 事件对 HTML 页面的窗口工作方式类似。此事件在用户定义的标签和窗口应用程序上工作。

<!DOCTYPE html>
<html>
<head>
<title> Mouseover and mouseout events in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h2> Mouseover evnets with Windows in JavaScript </h2>
<div>
The javascript mouse over event works to place a pointer or move the pointer on the particular tag. It is a mouse event to handle functionality with the pointer.
</div>
<p id = "datas"> </p>
<script>
window.addEventListener("mouseover", demoOverFunction);
function demoOverFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseover function activates successfully!!!";
}
window.addEventListener("mouseout", demoOutFunction);
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouseout function activates successfully!!!";
}
</script>
</body>
</html>

输出

该图片显示了已激活的 mouseout 事件输出页面。

示例 5

以下示例展示了在 HTML 标签和处理程序事件上不使用 mouseover 函数的 mouseout 事件。它仅在鼠标指针位于 div 上并移出标签时起作用。使用 mouseout 函数后，样式会持续显示。

<!DOCTYPE html>
<html>
<head>
<title> Mouseout function in javascript </title>
<style>
#demoDIV {
border: 1px solid black;
color:red;
}
#datas {
color: gree;
}
</style>
</head>
<body>
<h2> JavaScript Mouse out Method </h2>
<p id = "datas"> </p>
<div id = "demoDIV" onmouseout = "demoOutFunction()" >
The javascript mouse-out event works after removing the pointer on the particular tag. It is a mouse event to handle functionality to disable the mouseout function.
</div>
<script>
function demoOutFunction() {
document.getElementById("datas").innerHTML = "JavaScript Mouse out Method activates successfully!!!";
document.getElementById("demoDIV").style.fontSize = "18px";
document.getElementById("demoDIV").style.color = "black";
}
</script>
</body>
</html>

输出

该图片显示了已激活的 mouseout 事件输出页面。

结论

mouseout 事件对于用户交互和应用程序的鼠标功能非常有用。它主要用于吸引人的数据和交互式页面。

下一个主题JavaScript 的 Mouseover 函数

Mouseout 事件在 javascript 中的用法

语法

支持的浏览器

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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

Mouseout 事件在 javascript 中的用法

语法

支持的浏览器

示例

结论

相关帖子

JavaScript removeChild

WebSocket 是什么？

JavaScript 的用途是什么？

JavaScript 一元运算符

Vanilla JavaScript 是什么？

JavaScript 免费认证

JavaScript prepend() 方法

如何使用 HTML CSS 和 JavaScript 在导航菜单中制作弯曲的活动标签

如何使用 JavaScript 将对象添加到数组

移除数组中的重复项

订阅 Tpoint Tech

联系信息

关注我们