事件是由访问 Web 页面的用户引起的操作，比如鼠标点击按钮、滑过某个图片都可能会触发事件。
JavaScript 中通过给 HTML 元素添加“事件监听”，从而让此元素对各种事件作出反应。
题目：点击按钮，弹出对话框，显示“你好，JavaScript！”。
案例代码如下：
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button id="btn">按我</button>
<script type="text/javascript">
// 得到这个按钮
var oBtn = document.getElementById("btn");
//单击事件监听
oBtn.onclick = function(){
alert("你好，JavaScript！");
}
</script>
</body>
</html>
代码中，oBtn.onclick=function(){}是核心语句，在为按钮添加单击事件监听。所谓“监听”是浏览器
底层程序在实时“监控”着按钮是否被点击，一旦被点击，则立即执行设置的这个函数，这个函数叫做“事件处
理函数”。
JavaScript 中，事件监听的名字基本都是以 on 开头，表示“当”。比如 onclick 就是“当单击时”的意
思。表 8-1 列出了几个常见的事件监听。
表 8-1 常见事件监听
事件名 意义
onclick 单击
onmouseover 鼠标进入
onmouseout 鼠标离开
ondblclick 双击
onmousedown 鼠标按下
onmouseup 鼠标按键抬起
给 HTML 元素添加事件监听写法较为固定，公式为：
元素.事件名 = function(){
}
同一个元素可以添加多个不同的事件监听。比如一个按钮，又可以监听鼠标进入事件，也可以同时监听鼠标
离开事件。
实战案例：鼠标触碰图片切换
题目：鼠标碰到图片就换图；鼠标离开图片，恢复原图。
本案例需要给盒子添加两个事件监听 onmouseover 和 onmouseout，分别监听鼠标进入图片和鼠标离开图
片两个事件。
代码如下：
<!DOCTYPE html >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="images/pic_a.jpg" id="pic" />
<script type="text/javascript">
// 得到这个图片
var oPic = document.getElementById("pic");
//鼠标进入事件监听
oPic.onmouseover= function(){
this.src = "images/pic_b.jpg";
}
//鼠标离开事件监听
oPic.onmouseout = function(){
this.src = "images/pic_a.jpg";
}
</script>
</body>
</html>
程序中的事件处理函数中出现了 this，表示 oImg 自身。事件处理函数中的 this 一律表示添加监听的这元
素本身。
程序中给 oPic 元素添加了两个事件监听：onmouseover、onmouseout，分别监听鼠标进入图片和鼠标离
开图片。鼠标进入触碰时，图片的路径被改为“pic_b.jpg”，而鼠标离开时图片的路径又被更改回来。
本章作业
1. DOM 是什么？它有什么优点？
2. 得到 HTML 元素的方式有哪些？兼容性如何？
3. 如何通过 DOM 对 HTML 元素进行基本操作，如改变它的内部文字、标签的属性、改变类型和设置 CSS 样式？
4. 如何为元素添加事件监听？
5. 制作一个效果：鼠标触碰复选框时，显示“为了信息安全，请勿在网吧或公用电脑上使用此功能！”字样的
提示盒子。鼠标离开时，盒子隐藏。
6. 制作鼠标触碰图片切换图片的效果。
