JavaScript文件(代码清单4-3)采用编程方式将事件绑定到键上。
代码清单4-3 musical.js
window.onload调用了assignKeys()函数(可以在这个文件中直接定义window. onload，但是这限制了它的可移植性)。通过唯一的ID来发现keyboard元素，然 后使用getElementsByTagName()遍历访问其内部所有的DIV元素。这需要知道一 些关于页面结构的知识，但是它允许页面设计师自由地在页面中将键盘DIV以希 望的方式任意移动。
表示键的DOM元素返回一个单独的字符串作为className属性。我们使用内建 的String. split函数将其转换为一个数组，并且检查元素是否是musicalButton 类。之后读取样式的另一部分——它代表了键所演奏的音符 ——并且作为一个额外的属性附加在DOM节点上，这个属性可以被事 件处理函数获得。
通过Web浏览器演奏音乐需要相当高的技巧，在这里，我们仅仅对键盘下的控 制台进行了编程，用innerHTML已经足够了。图4-4显示了活动中的音乐键盘。这 里我们实现了很好的角色分离，假设页面设计师去掉了页面上某个地方的键盘和 控制台的DIV标签，只要页面包括了样式表和JavaScript，应用程序仍然可以工 作，偶然打破事件逻辑的风险是很小的。HTML页面有效地成为了一个模版，我们 向其中注入了变量和逻辑，这提供了一个保持逻辑与视图相分离的好方法。我们 已经手工完成了这个例子，以此来示范工作机制的细节。在生产环境中，你可能 喜欢使用几个解决了同样问题的第三方库。
图4-4 运行于浏览器中的音乐键盘应用。顶部的彩色区域被映射到音符上， 当鼠标在上面移动时，音符打印在下面的控制台区域
Rico框架(www.openrico.org)有一个Behavior对象的概念，它以DOM树的特定 部分为目标，为它们添加交互性。3.5.2节曾简单地考察了Rico Accordion的行 为。
类似的分离HTML标记和交互性的方法可以通过Ben Nolan的Behaviour库来实 现(参见本章“资源”一节)。这个库允许基于CSS选择器规则将事件 处理函数代码分配给DOM元素(见第2章)。在之前的例子中，assignKeys()函数以 keyboard作为id采用编程方式选择文档元素，然后使用DOM处理方法得到它直接 包含的所有DIV元素。我们可以使用一个CSS选择器来表达：
#keyboard div
使用CSS选择器可以给所有的keyboard元素设置样式。使用Behaviour.js库， 也可以用相同的方法应用事件处理函数，如下：
大部分逻辑与前面的例子是一样的，但是对CSS选择器的使用提供了一种采用 编程方式定位DOM元素的简明的替代方法，特别是当需要立即添加几个行为的时 候。
这种方法保持了逻辑与视图的分离，但是它也可能将视图和逻辑混在一起， 下面我们将会看到这一点。