一个网站的前端由三个层构成。由XHTML构建的结构层，它包括结构化和有语义的标签，以及网站的内容。可以在这一层之上增加一个表现层（
CSS）和一个行为层（
JavaScript），它们使网站看起来更漂亮，对用户更友好。这三层之间应该保持严格的分离。打个比方来说，应该具有这样的可能性：可以重写整个表现层而完全不需要触动到结构层和行为层。
除了这种严格的分离，表现层和行为层都需要得到来自结构层的指令。它们必须知道在哪里应用样式，在什么时候初始化行为——换句话说：它们需要触发器。
CSS的触发器大家都很了解。class和id属性使你可以完全地控制网站的表现。然而，通过使用内联的样式属性（译者注：指写在XHTML标签中的style="..."
属性），你也可以在不使用这些触发器的情况下工作，但这种用法是应该被强烈反对的。当你想要重新定义网站表现的时候，就会被迫连XHTML结构层也一起改掉。它们的出现破坏了表现和结构之间的分离。
JavaScript触发器
行为层也应该可以用同样的方式工作。通过抛弃使用内联的事件句柄（比如onmouseover="switchImages('fearful',6,false)"），我们可以把行为和结构分开。和CSS一样，我们应该使用触发器去告诉脚本在哪里部署行为。
最简单的JavaScript触发器是id属性。
<div id="navigation">
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</div>
var x = document.getElementById('navigation');
if (!x) return;
var y = x.getElementsByTagName('a');
for (var i=0;i<y.length;i++);y
.onmouseover = addBehavior
这样一来，这段脚本就由是否出现id="navigation"来触发了。如果没有id="navigation"，那么什么也不会发生（if (!x) return)；如果它出现了，那么所有被它包围的链接元素（指a标签）都会得到一个mouseover行为。
高级触发器
有些情况下不能使用id作为触发器：
一个id只能在文档中出现一次，有时候你可能想把同样的行为加到几个（或一组）元素之上。
有些情况下脚本需要比仅仅指出“在这里部署”更多的信息（译者注：比如传递一些参数）。
我们用表单脚本来作上面两个问题的例子。给XHTML加上表单校验触发器会很实用，比如指定“这个输入域（译者注：文字输入框、密码输入框等）是必填的”。为了实现这样的触发器，我们很可能得到如下的脚本：
function validateForm()
{
var x = document.forms[0].elements;
for (var i=0;i<x.length;i++)
{
if ([这个输入域是必填的] && !x.value)
// notify user of error
}
}
我们需要创建怎样的触发器才能告诉这个脚本哪些输入域是必填的呢？显然用id是不行的：理想的解决方案应该可以对一大堆输入域起作用。很自然的我们会想到是否可以用class来触发行为：
<input name="name" class="required" />
if (x.className == 'required' && !x.value)
//提示用户输入此域
class属性是用于定义CSS触发器的。把CSS和JavaScript的触发器合起来定义并不是不可能，但这样做很可能使代码变得一片混乱：
<input name="name" class="largefield required" />
if (
x.className.indexOf('required') != -1 &&
!x.value
)
信息传递触发器
此外，触发器也可以变得更复杂一些，而不仅仅是一个声明“在这里部署（行为）”的命令。有时候你可能想给触发器加一个变量，这样可以使行为层变得更加通用，可以对每一个XHTML元素个体的需求作出响应，而不是傻乎乎地执行一个标准的脚本。
拿一个表单打比方，这个表单包括一些字符串长度有上限的文本输入框。原先的maxlength属性已经不再在textarea元素上工作，所以我们必须写个脚本来做这件事。另外，并不是这个表单里所有的文本输入框都有相同的字符串长度上限，所以在某个地方把它们个自的上限长度存起来就显得很必要了。
var x = document.getElementsByTagName('textarea');
for (var i=0;i<x.length;i++)
{
if ([这个文本输入框有长度上限])
x.onkeypress = checkLength;
}
function checkLength()
{
var max = [读取长度上限的值];
if (this.value.length > max)
// notify user of error
}
这个文本输入框有长度上限吗？这是一个很概括的触发器，告诉脚本某些行为应该加在这里。上限是什么？这是一个值，使得脚本可以正确地检查用户输入在这里，用基于class的方式不再合适了。虽然从技术上讲不是不能做到，但是所需的代码会变得太复杂。打个比方，我们来给一个本身就带有一个叫“large”的class的文本输入框加上触发器，以便告诉脚本它是必填的，而且长度上限是300：
<textarea class="large required maxlength=300">
</textarea>
这样做不光把表现层和行为层混合在了一起，而且用于读出这个值的脚本也会变得比较怪异：
var max = this.className.substring(
this.className.indexOf('maxlength')+10
);
if (this.value.length > max)
// 提醒用户出错了。
很容易就注意到这段脚本只有当我们把maxlength=x放在最后一个的时候才能工作。如果我们想让这个脚本可以处理不是放在最后一个的maxlength=x（这种情况是常有的，比如我们想再加一个传值的触发器），它会变得更加复杂。