如何在JavaScript捕获鼠标事件

来源：互联网发布：freebsd linux 编辑：程序博客网时间：2024/05/16 12:44

前言

为页面增加与用户的交互是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" onclick="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" onmouseover="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"         onmouseover="this.src='pythoncode.png'"         onmouseout="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情绪控

0 1