JavaScript mouseenter 和 mouseleave 事件

2025 年 2 月 16 日 | 阅读 6 分钟

JavaScript mouseenter 事件在网页中用于使用 JavaScript 事件来进入和离开鼠标指针。mouseenter 事件主要与 mouseleave 事件一起使用，否则指针将持续工作。这些 JavaScript 事件比 mouseover 和 mouseout 函数更易于替换且更简单。

语法

以下语法显示了 JavaScript 鼠标事件的鼠标指针进入 (mouseenter) 函数。

<div id = "demo" onmouseenter = "function_name()"> </div>
<script>
function function_name(){
//write code here.
}
</script>

以下语法显示了 JavaScript 鼠标事件的鼠标指针离开 (mouseleave) 函数。

<div id = "demo" onmouseleave = "function_name()"> </div>
<script>
function function_name(){
//write code here.
}
</script>

支持的浏览器

mouseenter 和 mouseleave 事件函数支持许多浏览器。JavaScript 中的鼠标事件函数支持以下浏览器。

Chrome
边
火狐
Opera
Safari
IE

示例

示例展示了不同方法和事件的 mouseenter 和 mouseleave 事件。

示例 1

mouseenter 事件在示例中使用 HTML 标签和 JavaScript 函数进行工作。

<!DOCTYPE html>
<html>
<head> 
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
  border: 1px solid black;
}
#datas1 {
  color: red;
}
#datas{
  color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<b> Javascript Mouseenter event Example </b>
<p id = "demoVal" onmouseenter = "demoFunction(event)"> The mouseenter function works to enter the mouse pointer on the web page </p>
<p id = "datas1"> </p>
<div id = "datas">
</div>
<script>
function demoFunction(event) {
var button_val = event.button;
document.getElementById("datas1").innerHTML = "Mouseenter event values : "+button_val;
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
  document.getElementById("demoVal").style.width = "350px";
document.getElementById("demoVal").style.border = "dotted navy";
}
</script>
</body>
</html>

输出

输出显示了网页上 mouseenter 事件的功能。

Javascript Mouseenter and mouseleave event

示例 2

mouseenter 事件在示例中使用 HTML 标签和 JavaScript 函数进行工作。我们可以使用 JavaScript 标签中的事件来更改 div 的样式。

<!DOCTYPE html>
<html>
<head> 
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
  border: 1px solid black;
}
#datas1 {
  color: red;
}
#datas{
  color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<b> Javascript Mouseenter event Example </b>
<p id = "demoVal" onmouseenter = "demoFunction(event)"> The mouseenter function works to enter the mouse pointer on the web page </p>
<span id = "datas1" style=''>😄</span>
<span id = "datas2" style=''>🤓</span>
<div id = "datas"> </div>
<script>
function demoFunction(event) {
var button_val = event.button;
document.getElementById("datas1").style.fontSize = "50px";
document.getElementById("datas2").style.fontSize = "80px";
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
  document.getElementById("demoVal").style.width = "350px";
document.getElementById("demoVal").style.border = "dotted navy";
}
</script>
</body>
</html>

输出

输出显示了网页上 mouseenter 事件的功能。

示例 3

mouseenter 事件在示例中使用 HTML 标签和 JavaScript 函数进行工作。我们可以使用 mouseenter 函数每次更改随机背景颜色。

<!DOCTYPE html>
<html>
<head> 
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
  border: 1px solid black;
}
#datas1 {
  color: red;
}
#datas{
  color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<b> Javascript Mouseenter event Example </b>
<p id = "demoVal" onmouseenter = "demoFunction(event)"> The mouseenter function works to enter the mouse pointer on the web page </p>
<p id = "datas1"> </p>
<div id = "datas">
</div>
<script>
function demoFunction(event) {
var button_val = event.button;
document.getElementById("datas1").innerHTML = "Mouseenter event values : "+button_val;
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
 document.getElementById("demoVal").style.width = "350px";
var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoVal").style.backgroundColor = color;
}
</script>
</body>
</html>

输出

输出显示了网页上 mouseenter 事件的功能。

Example4

示例展示了在 HTML 标签中使用 mouseenter 事件和 mouseleave 事件。我们可以使用 mouseenter 事件更改表情符号和 div 标签的大小和颜色，并使用 mouseleave 事件移除样式。

<!DOCTYPE html>
<html>
<head> 
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
  border: 1px solid black;
  width:350px;
}
#datas1 {
  color: red;
}
#datas{
  color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<b> Javascript Mouseleave event Example </b>
<p id = "demoVal" onmouseenter = "demoFunction()"  onmouseleave = "demoFunction2(event)"> 
the mouseenter function works to enter the mouse pointer on the web page.
the mouseleave function works to remove the mouse pointer on the web page </p>
<span id = "datas1" style='font-size:50px;'>?</span>
<span id = "datas2" style='font-size:50px;'>?</span>
<div id = "datas"> </div>
<script>
function demoFunction() {
document.getElementById("datas1").style.fontSize = "20px";
document.getElementById("datas2").style.fontSize = "20px";
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
document.getElementById("demoVal").style.fontSize = "20px";
  document.getElementById("demoVal").style.color = "green";
document.getElementById("demoVal").style.border = "dotted navy";
}
function demoFunction2() {
document.getElementById("datas1").style.fontSize = "50px";
document.getElementById("datas2").style.fontSize = "50px";
document.getElementById("datas").innerHTML = "JavaScript Mouseleave function activates successfully!!!";
document.getElementById("demoVal").style.fontSize = "12px";
document.getElementById("demoVal").style.color = "black";
}
</script>
</body>
</html>

输出

输出显示了网页上 mouseenter 事件的功能。

示例 5

示例展示了在 addEventListener 中使用 mouseenter 事件和 mouseleave 事件。这些事件与 mouseleave 和 mouseenter 函数一起工作并更改样式标签。背景颜色使用事件进行更改和移除。

<!DOCTYPE html>
<html>
<head> 
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
  border: 1px solid black;
  width:350px;
}
#datas1 {
  color: red;
}
#datas{
  color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<p id = "demoVal"> 
The mouseenter function works to enter the mouse pointer on the web page.
The mouseleave function works to remove the mouse pointer on the web page </p>
<span id = "datas1" style='font-size:50px;'>?</span>
<span id = "datas2" style='font-size:50px;'>?</span>
<div id = "datas"> </div>
<script>
var demoObj = document.getElementById("demoVal");
demoObj.addEventListener("mouseenter", demoFunction);
//use mouseenter event with handler name
function demoFunction() {
document.getElementById("datas1").style.fontSize = "20px";
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
 var color = "#" + Math.floor(Math.random()*16777215).toString(16).padStart(6, '0').toUpperCase();
document.getElementById("demoVal").style.backgroundColor = color;
}
//use mouseleave event with handler name
demoObj.addEventListener("mouseleave", demoFunction2);
function demoFunction2() {
document.getElementById("datas1").style.fontSize = "50px";
document.getElementById("datas").innerHTML = "JavaScript Mouseleave function activates successfully!!!";
document.getElementById("demoVal").style.backgroundColor = "white";
}
</script>
</body>
</html>

输出

输出显示了网页上 mouseenter 事件的功能。

示例 6

示例展示了在 HTML 标签中使用 mouseenter 事件和 mouseleave 事件。我们可以使用与 ID 名称相同的处理程序名称。mouseenter 会更改特定的表情符号并移除相同表情符号的样式。

<!DOCTYPE html>
<html>
<head>
<title> Javascript Mouseenter and mouseleave event in JavaScript </title>
<style>
#demoVal {
border: 1px solid black;
width:350px;
}
#datas1 {
color: red;
}
#datas{
color: blue;
}
</style>
</head>
<body>
<h3> Javascript Mouseenter and mouseleave event </h3>
<p id = "demoVal">
the mouseenter function works to enter the mouse pointer on the web page
the mouseleave function works to remove the mouse pointer on the web page </p>
<div id = "container">
<span id = "datas1" onmouseenter = "demoFunction(this.id)"  onmouseleave = "demoFunction2(this.id)" style='font-size:20px;'>😲</span>
<span id = "datas2" onmouseenter = "demoFunction(this.id)"  onmouseleave = "demoFunction2(this.id)" style='font-size:20px;'>😁</span>
<span id = "datas3" onmouseenter = "demoFunction(this.id)"  onmouseleave = "demoFunction2(this.id)" style='font-size:20px;'>😀</span>
<span id = "datas4" onmouseenter = "demoFunction(this.id)"  onmouseleave = "demoFunction2(this.id)" style='font-size:20px;'>😂</span>
</div>
<div id = "datas"> </div>
<script>
//use mouseenter event with handler name
function demoFunction(events) {
document.getElementById("datas").innerHTML = "JavaScript Mouseenter function activates successfully!!!";
document.getElementById(events).style.backgroundColor = "green";
document.getElementById(events).style.fontSize = "50px";
}
//use mouseleave event with handler name
function demoFunction2(events) {
document.getElementById(events).style.backgroundColor = "white";
document.getElementById(events).style.fontSize = "20px";
document.getElementById("datas").innerHTML = "JavaScript Mouseleave function activates successfully!!!";
}
</script>
</body>
</html>

输出

输出显示了网页上 mouseenter 事件的功能。

结论

mouseenter 和 mouseleave 事件同时用于页面的高级和动画 UI。这对于处理与鼠标相关功能的开发人员和用户来说非常容易。

下一主题JavaScript onwheel 鼠标事件

JavaScript mouseenter 和 mouseleave 事件

语法

支持的浏览器

示例

结论

联系信息

关注我们

教程

面试题

在线编译器

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 mouseenter 和 mouseleave 事件

语法

支持的浏览器

示例

结论

相关帖子

JavaScript scrollIntoView

JavaScript 中的柯里化 (Currying)

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

使用 JavaScript 框架创建演示文稿

如何使用 JavaScript 计算圆的周长和面积

如何获取 JavaScript 中所有选中的复选框的值

JavaScript 执行上下文

JavaScript Infinity 属性

JavaScript Endswith() 函数

JavaScript insertBefore

订阅 Tpoint Tech

联系信息

关注我们