前言
为页面增加与用户的交互是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情绪控
版权声明：本文为博主原创文章，未经博主允许不得转载。