47.Event mouse

  但是不管你用内联方式还是后面要学的脚本编程方法，点击（onClick）事件只是众多事件中的一种，在这个章节，你将会学习到，当用户移动鼠标到页面上的时候，以及鼠标离开页面的时候，会发生什么。

  假设你的页面刚开始是一张之前 "before" 的图片，当用户移动鼠标到这张图片的时候，这张图片被之后 "after"的图片替换了，你可能在想用CSS来实现这种效果，但是这是JavaScript的书本，所以我们要用事件处理程序来处理这种情况。

  下面代码就是用之后（after）的图片替换之前（before）的图片的处理方式。

  刚开始，它就只是一张普通香草的图片。

  然后接下来就是事件处理程序要用到的关键字，关键字用驼峰写法表示，你可以选择其他方式（上一章节说过，事件处理的关键字对大小写不敏感），但是比较通用的写法是：onMouseover。

  之后就如同onClick一样，在关键字onMouseover后面是一个等号，等号后面，也就是在引号内是事件响应程序。

  你可能会很惊讶，这次的事件响应竟然不是JavaScript代码，而是HTML标签代码。

  要注意的是，图片地址必须用单引号，因为整个响应事件语句都是在双引号内。

  在其他HTML标签中，同样也可以用onMouseover事件处理，下面代码是用内联的写法展示了当鼠标移动到标题（heading）的时候，会弹窗显示消息。

  当用户鼠标移动到标题的时候，会alert弹窗显示信息。

  在上面代码中，你也许更乐意用调用函数的方式来alert弹出消息，而不是用内联的方式，直接写alert代码。

  下面用JavaScript的方式来替换CSS常用的鼠标悬浮，从而改变颜色。

  当用户移动鼠标到这个链接上面，这个链接会变成绿色。

  在下面这个例子中，当用户移动鼠标到文字上面的时候，下面会展开所有的消息。

  现在也不用关心expand函数是如何展开段落信息的，后面章节我们也会提到的。

  在本章开始的时候，我们说过图片轮转（the model's before-and-after pictures），当用户鼠标移动到图片的时候，之后（after）的图片会替换之前（before）的图片。正常情况，当用户鼠标移开的时候，原来的图片应该复原回去，所以我们最好把onMouserout鼠标移出事件也结合进来。

本篇的代码习题，可以去下面这个地址练习： http://www.asmarterwaytolearn.com/js/47.html

读书笔记：

plain vanilla 普通香草

wild 野生的

alternative to …的替换物

revert to 恢复、回复，归还