HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick超级易懂实例讲解

最新推荐文章于 2021-11-24 19:51:06 发布

Alan_Lowe

最新推荐文章于 2021-11-24 19:51:06 发布

阅读量1.3k

点赞数 4

分类专栏： # DOM 文章标签： dom 悬停点击

本文链接：https://blog.csdn.net/qq_45985728/article/details/119775301

版权

DOM 专栏收录该内容

6 篇文章

订阅专栏

这篇博客通过实例展示了HTMLDOM中onmouseover、onmouseout、onmousedown、onmouseup和onclick事件的用法，详细解释了这些事件在鼠标悬停、点击过程中的不同阶段如何触发相应函数，从而改变元素内容或页面样式，强调了这些基础事件在网页交互设计中的重要性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML DOM|onmouseover、onmouseout、onmousedown、onmouseup、onclick

1.onmouseover和onmouseout

根据单词的意思就可以看出这两个属性是鼠标悬停在元素上方和鼠标离开元素的意思，实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>悬停和点击</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 5px solid red;
            background-image: radial-gradient(green,yellow);
            font-size: 50px;
        }
    </style>
    <script>
        function overFun(x){
            x.innerHTML = "悬停";
        }
        function outFun(x){
            x.innerHTML = "离开";
        }
    </script>
</head>
<body>

<!--鼠标悬停在这个元素上会调用overFun()，离开会条用outFun()-->
<div onmouseover="overFun(this)" onmouseout="outFun(this)"></div>

</body>
</html>

悬停：

在这里插入图片描述

离开：

在这里插入图片描述

2.onmousedown、onmouseup、onclick

onmousedown和onmouseup分别表示在鼠标点击未松开时的事件和松开时的事件，onclick表示鼠标点击完成时的事件，实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标点击</title>
    <style>
        div{
            width: 300px;
            height: 300px;
            border: 5px solid red;
            background-image: radial-gradient(green,yellow);
            font-size: 50px;
        }
    </style>
    <script>
        function downFun(x){
            x.innerHTML = "点击";
        }
        function upFun(x){
            x.innerHTML = "松开";
        }
        function clickFun(){
            document.body.style.background = "#111111";
        }
    </script>
</head>
<body>

<!--点击时显示点击，松开时显示松开，点击完成时将body的背景变色-->
<div onmousedown="downFun(this)" onmouseup="upFun(this)" onclick="clickFun()"></div>

</body>
</html>