Ajax实战：绑定事件处理函数代码

JvaScript文件(代码清单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框架()有一个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元素的简明的替代方法，特别是当需要立即添加几个行为的时候。

　　这种方法保持了逻辑与视图的分离，但是它也可能将视图和逻辑混在一起。