JavaScript触发器详解

2024-09-06 12:43:03

字体：大中小

来源：转载

供稿：网友

一个网站的前端由三个层构成。由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[i].onmouseover = addBehavior;
　　这样一来，这段脚本就由是否出现id="navigation"来触发了。如果没有id="navigation"，那么什么也不会发生（if (!x) return)；如果它出现了，那么所有被它包围的链接元素（指a标签）都会得到一个mouseover行为。这种解决方案简洁、优雅，在所有的浏览器中都能工作。如果这种方法已经能够满足你的需求，那么你就不需要再读下去了：）

高级触发器
　　不幸的是有些情况下你不能使用id作为触发器：

一个id只能在文档中出现一次，有时候你可能想把同样的行为加到几个（或一组）元素之上。
有些情况下脚本需要比仅仅指出“在这里部署”更多的信息（译者注：比如传递一些参数）。
　　我们用表单脚本来作上面两个问题的例子。给XHTML加上表单校验触发器会很实用，比如指定“这个输入域（译者注：文字输入框、密码输入框等）是必填的”。为了实现这样的触发器，我们很可能得到如下的脚本：

上一篇：HTML在线编辑器的基本概念与相关资料第1/2页

下一篇：鼠标经过时链接文字的特别震撼的显示效果