把兔子藏起来现在网页看起来很漂亮，但是仍然有点原始。虽然兔子从帽子中跳出来了，但是屏幕下方的按钮仍然显示 Hocus Pocus! 和调用 showRabbit()。这就是说如果在兔子出来之后仍然点击按钮，就是在浪费处理时间。更重要的是，它毫无用处，而没有用的按钮不是好东西。我们来看看能否利用 DOM 再作一些修改，无论兔子在帽子里还是出来都让这个按钮派上用场。
修改按钮的标签最简单的是当用户点击按钮之后改变它的标签。这样就不会看起来像还有什么魔法，网页中最糟糕的就是暗示用户错误的东西。在修改按钮的标签之前需要访问该节点，而在此之前需要引用按钮 ID。这是老套路了， 为按钮增加了 id 属性。
清单 8. 增加 id 属性1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>
|
现在用 JavaScript 访问按钮很简单了：
1
2
3
4
5
| function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
}
|
当然，您可能已经输入了下面这行 JavaScript 来改变按钮的标签值。这里再次用到了 setAttribute()：
1
2
3
4
5
6
| function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Get back in that hat!");
}
|
通过这个简单的 DOM 操作，兔子跳出来之后按钮的标签马上就会改变。现在，HTML 和完成的 showRabbit() 函数如 所示。
清单 9. 完成的网页1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
button.setAttribute("value", "Get back in that hat!");
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>
|
把兔子收回去从此新的按钮标签中可能已经猜到，现在要把兔子收回帽子中去。基本上和放兔子出来完全相反：将图片的 src 属性再改回旧图片。创建一个新的 JavaScript 函数来完成这项任务：
1
2
3
4
5
6
| function hideRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "topHat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Hocus Pocus!");
}
|
实际上仅仅把 showRabbit() 函数的功能翻转了过来。将图片改为原来的没有兔子的大礼帽，抓取按钮，将标签改为 Hocus Pocus!
事件处理程序现在这个示例应用程序有一个大问题：虽然按钮的标签 改变了，但是单击按钮时的动作没有 变。幸运的是，当用户单击按钮时可以使用 DOM 改变事件或者发生的动作。因此，如果按钮上显示 Get back in that hat!，点击的时候需要运行 hideRabbit()。相反，一旦兔子藏了起来，按钮又返回来运行 showRabbit()。
避免使用 addEventHandler()除了 onclick 属性外，还有一个方法可用于添加 onClick 或 onBlur 这样的事件处理程序，毫不奇怪这个方法就叫 addEventHandler()。不幸的是，Microsoft™ Internet Explorer™ 不支持这个方法，如果在 JavaScript 中使用它，就会有数百万 Internet Explorer 用户除了错误外从网页中什么也看不到（可能还有抱怨）。不使用这个方法，应用本文中介绍的办法也能达到同样的效果，而且在 Internet Explorer 上也有效。
查看 HTML 就会发现这里处理的事件是 onClick。在 JavaScript 中，可以通过按钮的 onclick 的属性来引用该事件。（要注意，在 HTML 中该属性通常称为 onClick，其中 C 大写；而在 JavaScript 中则称为 onclick，全部小写。）因此可以改变按钮触发的事件：只要赋给 onclick 属性一个新的函数。
但是有点细微的地方：onclick 属性需要提供函数引用——不是函数的字符串名称，而是函数本身的引用。在 JavaScript 中，可以按名称引用函数，不需要带括号。因此可以这样修改点击按钮时执行的函数：
1
| button.onclick = myFunction;
|
因此在 HTML 中作这种修改很简单。看看，它切换按钮触发的函数。
清单 10. 改变按钮的 onClick 函数1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
| <html>
<head>
<title>Magic Hat</title>
<script language="JavaScript">
function showRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "rabbit-hat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Get back in that hat!");
button.onclick = hideRabbit;
}
function hideRabbit() {
var hatImage = document.getElementById("topHat");
hatImage.setAttribute("src", "topHat.gif");
var button = document.getElementById("hocusPocus");
button.setAttribute("value", "Hocus Pocus!");
button.onclick = showRabbit;
}
</script>
</head>
<body>
<h1 align="center">Welcome to the DOM Magic Shop!</h1>
<form name="magic-hat">
<p align="center">
<img src="topHat.gif" id="topHat" />
<br /><br />
<input type="button" value="Hocus Pocus!" id="hocusPocus"
onClick="showRabbit();" />
</p>
</form>
</body>
</html>
|
这样就得到了一个完成的、可以使用的 DOM 应用程序。自己试试吧！ |
