Ajax实战：使用CSS间接添加事件

Ajax实战：使用CSS间接添加事件2011-09-06希赛网让我们来看一个简单的例子，在这里将鼠标事件绑定在虚拟的音乐键盘的键上。代码清单4-1定义了一个包含原始文档结构的简单页面。

代码清单4-1 musical.html

<！DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Keyboard</title>
<link rel="stylesheet" type="text/css" href="musical.css"/>
<script type="text/javascript" src="musical.js"></script>
<script type="text/javascript">
window.onload=assignKeys;
</script>
</head>
<body>

我们声明了页面以符合严格定义的XHTML，仅仅为了显示这是可以做到的。我们为表示键盘的keyboard元素分配了唯一的ID，但是没有为表示键的元素分配ID 。注意，每一个指定的键都有两个样式。musicalButton对于所有的键是通用的，另外一个单独的样式通过音符来区别它们。这些样式在样式表中单独定义（代码清单4-2）。