让我们来看一个简单的例子，在这里将鼠标事件绑定在虚拟的音乐键盘的键上。代码清单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
titleKeyboard/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)。
代码清单4-2 musical.css
样式musicalButton定义了每个键的通用属性，特定于音符的样式仅仅定义了每个键的颜色。注意，尽管顶级文档元素使用显式的像素精度来定位，但是通过float样式属性应用浏览器内建的布局引擎，可以将各个键分布在一条水平线上。
