如何在JavaScript捕获鼠标事件

最新推荐文章于 2023-06-17 18:13:21 发布

IT界的吉祥物

最新推荐文章于 2023-06-17 18:13:21 发布

阅读量1w

点赞数 5

分类专栏： JavaScript JavaScript基础教程文章标签： javascript 鼠标事件 onMouseOver onMouseOut 基础

本文链接：https://blog.csdn.net/hai_qing_xu_kong/article/details/48206441

版权

JavaScript 同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

JavaScript基础教程

18 篇文章 7 订阅

订阅专栏

前言

为页面增加与用户的交互是JavaScript的基本功能之一。为此，我们需要一些机制来检测用户和程序在特定时间

在做什么。比如鼠标在浏览器的什么位置，用户是否点击鼠标或按了键，页面是否完整加载到浏览器等等。在些发生

的事情，我们称之为“事件”，JavaScript提供了多种工具来操作它们。

.1 onClick事件处理器

onClick事件处理器几乎可以用于页面上任何可见的HTML元素。使用它的方式之一是给HTML元素添加一个属性

为：onclick。看下面的范例:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <input type="button" οnclick="alert('Hello')" value="Button"/>
</body>
</html>

效果图如下：

上述HTML代码在页面的body区域添加一个按钮，并且设置了它的onClick属性，从而在它被点击时运行相应的

JavaScript代码。当用户点击这个按钮时，onClick事件被激活，然后执行属性中所包含的JavaScript语句被执行。

.2 onMouseOver和onMouseOut事件处理器

如果需要检测鼠标指针与特定页面元素的位置关系，可以使用onMouseOver和onMouseOut事件处理器。当鼠标

进入页面上某个占据的区域时，会触发onMouseOver事件。而onMouseOut事件，很显然是在鼠标离开这一区域时触

发的。以下程序示范了onMouseOver事件的处理过程。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="javacodeI.png" alt="image1" οnmοuseοver="alert('Hello')"/>
</body>
</html>

通过上面的程序可以看出，当鼠标进入图像区域时触发事件处理器。效果图如下：

实现图像变换

利用onMouseOver和onMouseOut事件处理器可以在鼠标位于图像上方时，改变图像的显示方式。为此，当鼠标

进入图像区域时，可以利用onMouseOver改变<img>元素的src属性，当鼠标离开时，利用onMouseOut再把这个属性

修改回来，当然这种图像变换方式完全可以用CSS来实现，这里只是演示onMouseOver和onMouseOut事件处理的用

法。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    <img src="javacodeI.png" alt="image 1"
         width="120"
         height="160"
         οnmοuseοver="this.src='pythoncode.png'"
         οnmοuseοut="this.src='javacodeI.png'"/>
</body>
</html>

上述代码中出现了一些新语法，在onMouseOver和onMouseOut语句中使用了关键字this，当事件处理器是通过

HTML元素的属性添加到页面时，其中的this是指HTML元素本身，示例中就是指当前图像，this.src就是指这个图像对

象的src属性。

在img中我们也看到了width和height的属性，它们是img的属性，代表图像的宽高。

我们看看效果如下：

-------------------------------------------------------------------------------------------------------------------------------------------------------

转载请注明出处：http://blog.csdn.net/hai_qing_xu_kong/article/details/48206441情绪控