如何在JavaScript捕获鼠标事件

前言


为页面增加与用户的交互是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情绪控



©️2020 CSDN 皮肤主题: 猿与汪的秘密 设计师:上身试试 返回首页